Vue中使用axios发送异步请求到Django

laufing

已于 2024-04-05 15:36:41 修改

阅读量2.1k

点赞数 1

分类专栏：前端框架Vue 文章标签： vue.js javascript django

于 2022-02-09 13:30:01 首次发布

本文链接：https://blog.csdn.net/weixin_45228198/article/details/122839989

版权

前端框架Vue 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

本文介绍了Promise和axios在前后端交互中的使用，包括Promise的基本构造和状态管理，axios的配置与网络请求操作，如GET、POST等。在前后端不分离的情况下，如何处理普通HTML页面的axios请求，而在前后端分离的Vue项目中，如何配置axios进行跨域请求。同时，文章还提及了Django后端的跨域配置和Vue脚手架中模块的导入。

摘要由CSDN通过智能技术生成

Promise

一个构造函数，异步编程的解决方案。

let promise = new Promise(executor) //构造一个对象

//执行者
let executor = function(resolve, reject){
	//解决浪费时间的事情
	resolve('结果') //成功的结果
	reject('失败') //失败的结果，  任意一个执行则结束
}

//promise 对象的state
//state ->pending; result -> undefined
//resolve(result)--> state:fulfilled; result:value
//reject(err)--> state:rejected; result:err

在这里插入图片描述
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'  //django server,这种方式无法接收到响应的set-cookie;通过配置Vue代理解决
axios.defaults.withCredentials = true // allow take cookie
axios.defaults.headers['token'] = localStorage.getItem("token")||""  //好像不起作用
axios.defaults.headers['X-Requested-With'] = 'XMLHttpResquest' //异步请求
axios.defaults.headers.post['Content-Type'] = 'application/json'

//GET
axios.get("xxx", {
	params:{k:v}
	headers:{k:v}
})
.then(res=>{xx})
.catch(err=>{xx})

//POST

axios.post('xx', {k:v}, {headers:{token:xxxx}}).then(res=>{}).catch(err=>{})

//DELETE
axios.delete("xxx", {
	params:{k:v}
	data:{k:v},
	headers:{token:xxx}
})

//PUT
axios.put("xxx", {
   k:v,
}, {headers:{}})

//res.data   响应数据
//res.headers 响应头     怎么获取cookie?????

django后端接收token及返回token：

#接收
request.headers.get("token")

#返回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>
        <br>
        <input type="text" v-model="phone" placeholder="输入手机号">
        <button id="getSms" @click="getSms">获取短信验证码</button>
        <br><br>
        <input type="text" v-model="smsCode" placeholder="输入验证码">
        <button id="validateSms" @click="validateSms">校验短信验证码</button>
        {% csrf_token %}
    </div>

    <script>
    	//默认的服务地址
        // axios.defaults.baseURL = xxx
        //默认携带cookie
        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'
        
        // post请求的配置
        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
                    }

                    // 直接get， 可以提交数据
                    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
                    }
                    
                    // 前后端不分离，即普通页面html
                    // post请求无法发送数据, 需要处理数据
                    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发送请求

//npm install --save axios
import axios from 'axios'
//默认的django服务地址
axios.defaults.baseURL = 'http://127.0.0.1:8000'
//axios默认不携带cookie，需设置
axios.defaults.withCredentials = true  
//设置为异步请求
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
axios.defaults.headers['token'] = localStorage.getItem('token')||""
//配置post的请求头
axios.defaults.headers.post['Content-Type'] = 'application/json'

//发送get请求
axios.get('/test_sms_code/',{
params: {phone: this.phone},
headers: {}
}).then(res=>{}).catch(err=>{})

//发送post请求  put  same
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,
        },
        //data:{}  post提交数据
        //headers:{} 请求头部
      })

后端Django的跨域配置

#需django-cors-headers
INSTALLED_APPS = [
	...,
	'corsheaders',
	'rest_framework',
]
MIDDLEWARES = [
	'corsheaders.middleware.CorsMiddleware',
	'xxxcommonxxxx',
]

#允许跨进来的服务器地址
CORS_ORIGIN_WHITELIST = (
	'http://localhost:8080',
)
#允许请求带着Cookie 跨进来
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")

laufing

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录