axios的使用

axios的使用

一、axios的基本请求使用

安装

npm install axios --save

axios可以请求的方法：

• get：获取数据，请求指定的信息，返回实体对象
• post：向指定资源提交数据，例如：表单提交或者文件上传
• put：更新数据，从客户端向服务端传送的数据取代指定的文档的内容
• patch：更新数据，是对put方法的补充，用来对已知资源进行局部更新
• delete：请求服务器删除指定的数据

1.GET请求
axios.get(‘接口地址’，{params：{参数}}).then.((response)=>{})

axios.get('http://localhost:8000/user/',{params:{id:1}})
.then((resppnse)=>{
	 console.log(response.data)})	
	 //通过then()方法获取接口返回的数据

2.POST请求
axios.post(‘接口地址’,{数据}).then((response)=>{})

axios.post('http://localhost:8000/user/',{id:1})
.then((response)=>{
	console.log(response.data)})
	//通过then()方法获取接口返回的数据

3.PUT请求
axios.put(‘接口地址’,{数据}).then((response)=>{})

axios.put('http://localhost:8000/user/',{id:1})
.then((response)=>{
	console.log(response.data)})
	//通过then()方法获取接口返回的数据

4.DELETE请求
axios.delete(‘接口地址’,{params:{参数}}).then((response=>{}))

axios.delete('http://localhost:8000/user/',{params:{id:1}})
.then((response)=>{
	console.log(response.data)})
	//通过then()方法获取接口返回的数据
	
axios.delete('http://localhost:8000/user/',{data:{id:1}})
.then((response)=>{
	console.log(response.data)})
	//通过then()方法获取接口返回的数据

二、axios的请求拦截器和响应拦截器的使用

import axios from 'axios'
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前执行的操作
    // 过滤掉xxxx有关的请求接口
    // 配置token
    // 如果需要加密数据，则加密config.data
    return config;
}, function (error) {
    // 对请求错误执行的操作
    return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据执行的操作
    //如需要解密返回数据，则解密response.data
}, function (error) {
   // 对响应错误执行的操作
    return Promise.reject(error);
});
export default {
    install: (Vue, options) => {   
        Vue.prototype.Http = axios
    }
}

const Http = axios
export {Http}

三、axios结合django的使用
一.跨域问题

从网上了解到，跨域问题实际上是一种浏览器的基础安全设置，因为我们访问网站时，可能会自动带上一些本地cookie之类的信息，当用户从一个网站请求另一个网站时（或者是从一个端口/服务请求另一个端口服务时）就会产生跨域问题，总的来说就是不安全，具体可参照csrf漏洞，当你进入一个钓鱼网站，他将你的请求定向到一个正规网站，这样你访问的时候会带上你输入过的cookie，而这个钓鱼网站就可以得到你的cookie信息，从而利用你的身份做一些事情。

一般是后端做跨域的事情：
1.安装

pip install django-cors-headers

2.在setting中设置：

INSTALLED_APPS = [
    ...
    'corsheaders'
    ...
]
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', //这个设置为中间件的第一条
]

允许所有域名跨域(优先选择)

CORS_ORIGIN_ALLOW_ALL = True # 这里可以设置白名单

实际上生产环境我一般打包好来做 所以不会有跨域问题

二、.vue的axios请求：

this.axios.post('http://localhost:8000/login/', JSON.stringify({'a': ['1', '2'], '1':2}), {
                 headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              }
            })
              .then(res => {
                // 成功回调
                console.log('成功回调，接收回调信息:')
                console.log(res.data, typeof (res.data), res.data['name'])
                console.log('-------------------')
              }, res => {
                // 错误回调
                console.log(2)
              })