axios vue 回调函数_vue axios 请求封装

将axios 请求封装成公共方法，方面在项目中使用

1.首先在项目引入axios

cnpm i axios --save || npm i --save axios

2.在公共js引入axios

在js中引入axios，引入请求的http链接

3.定义请求头及过期时间

此处设置请求多长时间过期

4.配置请求头

axios如果需要在header里面传参数的化就写在这里

5.请求地址的处理

此处请求地址处理

actionName ：接口名

baseURL：为请求的服务端地址

到此处请求的方法就完成了只需要在定义一个公共的方法去处理请求行参就可以

6.定义公共的方法，接收行参调用请求的方法

第一种封装请求方式

第一种方式

reqUrl： 请求地址

reqMethod ：请求方式

reqData ：请求数据

callback：回调函数

dir ：直接返回响应数据(dir  如果存在直接 返回后后台返回的所有数据，不存在则只返回data内的数据)

将请求方法绑定在全局(main.js)

调用方式

绑定到全局后在页面中直接调用，两种方式，只返回data或者返回所有的数据

第二种封装方式

第二种方式

同理绑定到全局

调用方式

调用拿到后台返回的所有的参数进行判断处理

源码放在这里：

import axios from "axios";

let baseURL = 'http://www.baidu.con'

// 创建请求体

const http = axios.create({

timeout: 2000 * 300,

headers: {

"Content-Type": "application/json; charset=utf-8"

}

});

http.__proto__ = axios;

/**

* 请求拦截

*/

http.interceptors.request.use(

config => {

config.headers.sn = "123456";

return config;

},

error => {

return Promise.reject(error);

}

);

/**

* 响应拦截

*/

http.interceptors.response.use(

response => {

if (response.data && response.data.code === 403) {

// 401, 没有权限

} else if (response.data.code === 14003) {} else if (response.data.code && response.data.code !== 200) {

let msg = response.data.msg;

Toast(msg);

}

return response;

},

error => {

return Promise.reject(error);

}

);

/**

* 请求地址处理

*/

http.adornUrl = actionName => {

return baseURL + actionName;

}

/**

* 封装ajax请求

* 1.reqUrl、reqMethod为必填选项

* 2.type存在时导出数据

* @param {String}  reqUrl                  请求地址

* @param {String}  reqMethod                请求方式

* @param {JSON}    reqData                  请求数据

* @param {Function} callback                回调函数

* @param {Function} dir                      直接返回响应数据

*/

// 第一种方式

const myAjax = (reqUrl, reqMethod, reqData, callback, dir) => {

http({

url: http.adornUrl(reqUrl),

method: reqMethod,

data: reqData

})

.then(({ data }) => {

if (dir) {

callback(data);

} else if (data && data.code == 200) {

callback(data.data);

}

})

.catch(({ data }) => {

});

};

// 第二种方式

const myRequest = (reqUrl, reqMethod, reqData) => {

return http.request({

url: http.adornUrl(reqUrl),

method: "post",

data: reqData

});

};

export default {

myAjax,

myRequest

};

/**

*

*  main.js 中如此引用

*

*

* */

Vue.prototype.$myAjax = httpRequest.myAjax; // ajax请求方法

Vue.prototype.$myRequest = httpRequest.myRequest; // ajax请求方法

/**

*

* 第一种封装方式调用请求

*

*

*

* */

this.$myAjax('/api', "post", { name: '参数' }, res => {

});

或

this.$myAjax('/api', "post", { name: '参数' }, res => {

}, 'res');

/**

*

* 第二种封装方式调用请求

*

*

*

* */

const res2 = await this.$myRequest('/api', 'post', { name: '参数' })

const res0Data2 = res2.data