目录
Promise
一个构造函数，异步编程的解决方案。
let promise = new Promise(executor)
let executor = function(resolve, reject){
resolve('结果')
reject('失败')
}
promise对象的结果不能直接读取，应如下获取：
promise.then(result=>{
console.log(result)
}
).catch(err=>{console.log(err)})
axios
基于Promise，用于浏览器、nodejs的网络请求库
axios中文官网
axios.defaults.baseURL = 'http://127.0.0.1:8000'
axios.defaults.withCredentials = true
axios.defaults.headers['token'] = localStorage.getItem("token")||""
axios.defaults.headers['X-Requested-With'] = 'XMLHttpResquest'
axios.defaults.headers.post['Content-Type'] = 'application/json'
axios.get("xxx", {
params:{k:v}
headers:{k:v}
})
.then(res=>{xx})
.catch(err=>{xx})
axios.post('xx', {k:v}, {headers:{token:xxxx}}).then(res=>{}).catch(err=>{})
axios.delete("xxx", {
params:{k:v}
data:{k:v},
headers:{token:xxx}
})
axios.put("xxx", {
k:v,
}, {headers:{}})
django后端接收token及返回token：
request.headers.get("token")
res = JsonResponse({"token":xxx})
res['token'] = xxx
CORS_EXPOSE_HEADERS = (
'token',
)
axios无法暴露响应头set-cookie，即使配置vue代理，也无法获取这个头部，只是vue可以自动存储cookie信息到浏览器。下次请求时，axios可以设置携带cookie。
项目根目录vue.config.js
module.exports = {
devServer:{
proxy:"http://127.0.0.1:8000"
}
}
前后端不分离
使用django搭建后端，模板页面index.html
普通html页面使用axios post提交数据时，需要处理提交的数据，一般用qs库
#index.html 普通页面中使用axios
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试首页</title>
<script src="/static/js/jquery.js"></script>
<script src="/static/js/axios.js"></script>
<script src="/static/js/vue.js"></script>
<script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>
</head>
<body>
<style>
input{
font-size: 20px;
}
#getSms #validateSms{
font-size: 18px;
}
</style>
<div id="container" style="text-align: center;">
<p>测试redis存储短信验证码</p>
<input type="text" v-model="phone" placeholder="输入手机号">
<button id="getSms" @click="getSms">获取短信验证码</button>
<br>
<input type="text" v-model="smsCode" placeholder="输入验证码">
<button id="validateSms" @click="validateSms">校验短信验证码</button>
{% csrf_token %}
</div>
<script>
axios.defaults.withCredentials = true
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
axios.defaults.headers['token'] = localStorage.getItem('token') || ''
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
Vue.config.productionTip = false
new Vue({
data(){
return {
phone: "",
smsCode: "",
}
},
methods:{
getSms(){
console.log("获取短信验证码")
if(!this.phone){
alert("请输入手机号")
return
}
axios.get('/test_sms_code/',{params: {phone: this.phone}},
)
.then(res => {
console.log("响应:", res)
if(res.data.code == 200){
alert(res.data.msg + res.data.smsCode)
}else{
alert(res.data.err)
}
}).catch(err => {
return Promise.reject(err)
})
},
validateSms(){
console.log("验证短信验证码")
if(!this.smsCode){
alert("请输入短信验证码")
return
}
axios.post("/test_sms_code/",
Qs.stringify({
phone: this.phone,
smsCode: this.smsCode,
csrfmiddlewaretoken: $("input:last").val()
}), {
headers: {Authorization: token}
}).then(res => {
console.log("校验的响应:", res)
if(res.data.code==200){
alert(res.data.msg)
}else{
alert(res.data.err)
}
}).catch(err => {
return Promise.reject(err)
})
},
},
}).$mount("#container")
</script>
</body>
</html>
前后端分离
Vue服务中，使用axios发送请求
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:8000'
axios.defaults.withCredentials = true
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
axios.defaults.headers['token'] = localStorage.getItem('token')||""
axios.defaults.headers.post['Content-Type'] = 'application/json'
axios.get('/test_sms_code/',{
params: {phone: this.phone},
headers: {}
}).then(res=>{}).catch(err=>{})
axios.post("/test_sms_code/",
{
phone: this.phone,
smsCode: this.smsCode,
},
{
headers: {}
}).then(res=>{}).catch(res=>{})
request({
url: "consumers/consumers/",
method: "get",
params: {
pageNo: this.pageNo,
pageSize: this.pageSize,
},
})
后端Django的跨域配置
INSTALLED_APPS = [
...,
'corsheaders',
'rest_framework',
]
MIDDLEWARES = [
'corsheaders.middleware.CorsMiddleware',
'xxxcommonxxxx',
]
CORS_ORIGIN_WHITELIST = (
'http://localhost:8080',
)
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_METHODS = (
'get',
'post',
'put',
)
CORS_ALLOW_HEADERS = (
'x-requested-with',
'XMLHttpRequest',
'token',
'Content-Type',
)
vue脚手架导入模块
import axios from 'axios'
let axios = require('axios')
加载nodejs中的fs 模块
加载到空对象？？？？？
let fs = require("fs")
Original: https://blog.csdn.net/weixin_45228198/article/details/122839989
Author: laufing
Title: Vue中使用axios发送异步请求到Django
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/734530/
转载文章受原作者版权保护。转载请注明原作者出处！