动态Axios的配置步骤详解

网友投稿 638 2023-02-27


动态Axios的配置步骤详解

前言

以前写vue项目的时候都是使用vue-resource做为项目ajax库,在11月份的某一天尤大微博的更新表示ajax的库应该是通用的,放弃了对vue-resource的技术支持,推荐使用axios。

推荐使用Vue-cli工具来创建和管理项目,就算刚开始不熟悉,用着用着便可知晓其中的奥妙。前一段时间官方所推荐的数据请求插件还是Vue-resource,但现在已经变了,变成了Axios,不用知道为什么变了,反正这个用起来比那个好一些,用就是了,下面是一些封装axios请求的一些经验,不对之处,还望多多指教!

方法如下

一、创建文件,Vue项目初始化之后,在src目录下再创建一个util工具文件夹,一般就是用来存放一些封装的函数方法,现在让我们在util文件目录下创建一个http.js文件,封装axios方法。

二、直接上代码(常规版),代码中有详细的注释

import axios from 'axios' //引用axios

import {Promise} from 'es6-promise' //引入Promise

// axios 配置

axios.defaults.timeout = 5000; //设置超时时间

axios.defaults.baseURL = 'http://localhost:4000/api/v1/'; //这是调用数据接口

// http request 拦截器(所有发送的请求都要从这儿过一次),通过这个,我们就可以把token传到后台,我这里是使用sessionStorage来存储token等权限信息和用户信息,若要使用cookie可以自己封装一个函数并import便可使用

axios.interceptors.request.use(

config => {

const token = sessionStorage.getItem("token"); //获取存储在本地的token

config.data = JSON.stringify(config.data);

config.headers = {

'Content-Type':'application/json' //设置跨域头部,虽然很多浏览器默认都是使用json传数据,但咱要考虑IE浏览器。

};

if (token) {

config.headers.Authorization = "Token " + token; //携带权限参数

}

return config;

},

err => {

return Promise.reject(err);

}

);

// http response 拦截器(所有接收到的wAwrafUw请求都要从这儿过一次)

axios.interceptors.response.use(

response => {

//response.status===401是我和后台约定的权限丢失或者权限不够返回的状态码,这个可以自己和后台约定,约定返回某个自定义字段也是可以的

if(response.status == 401) {

router.push({ //push后面是一个参数对象,可以携带很多参数,具体可以去vue-router上查看,例如query字段表示携带的参数

path: '/login'

})

}

return response;

},

error => {

return Promise.reject(error.response.data)

});

export default axios;

/**

* fetch 请求方法

* @param url

* @param params

* @returns {Promise}

*/

export function fetch(url, params = {}) {

return new Promise((resolve, reject) => {

axios.get(url, {

params: params

})

.then(response => {

resolve(response.data);

})

.catch(err => {

reject(err)

})

})

}

/**

* post 请求方法

* @param url

* @param data

* @returns {Promise}

*/

export function post(url, data = {}) {

return new Promise((resolve, reject) => {

axios.post(url, data)

.then(response => {

resolve(response.data);

}, err => {

reject(err);

})

})

}

/**

* patch 方法封装

* @param url

* @param data

* @returns {Promise}

*/

export function patch(url, data = {}) {

return new Promise((resolve, reject) => {

axios.patch(url, data)

.then(response => {

resolve(response.data);

}, err => {

reject(err);

})

})

}

/**

* put 方法封装

* @param url

* @param data

* @returns {Promise}

*/

export function put(url, data = {}) {

return new Promise((resolve, reject) => {

axios.put(url, data)

.then(response => {

resolve(response.data);

}, err => {

reject(err);

})

})

}

三、(动态版),axios的拦截器不是必要的,不是每个项目都需要,而且headers里面的Content-Type和Authorization不止一种,这时就需要使用另一种方法。

util/http.js

import axios from 'axios' //引用axios

import {Promise} from 'es6-promise' //引入Promise

// axios 配置和拦截器都不用了,这里我使用了一个动态配置数据请求地址,在App.vue中,代码在下面,这个也不是必须的。

//^_^下面都设置一个默认的头部,使用的时候可以传入数据覆盖^_^,例如使用fetch(GET)方法时,没有请求数据,但是请求头有变化,则应写成 fetch("地址", {}, {"这里写头部的内容"}) 记住没数据用一个空对象占位置

/**

* fetch 请求方法

* @param url

* @param params

* @returns {Promise}

*/

export function fetch(url, params = {}, headers = {

'Content-Type': 'application/json', //设置跨域头部

"Authorization": 'JWT ' + sessionStorage.getItem("authToken")

}) {

return new Promise((resolvwAwrafUwe, reject) => {

axios.get(url, {

params: params,

headers: headers

})

.then(response => {

resolve(response.data);

})

.catch(err => {

reject(err.response)

})

})

}

/**

* post 请求方法

* @param url

* @param data

* @returns {Promise}

*/

export function post(url, data = {}, config = {

"headers": {

'Content-Type': 'application/json', //设置跨域头部

"Authorization": 'JWT ' + sessionStorage.getItem("authToken")

}

}) {

return new Promise((resolve, reject) => {

axios.post(url, data, config)

.then(response => {

resolve(response.data);

}, err => {

reject(err.response);

})

})

}

/**

* patch 方法封装

* @param url

* @param data

* @returns {Promise}

*/

export function patch(url, data = {}, config = {

"headers": {

'Content-Type': 'application/json', //设置跨域头部

"Authorization": 'JWT ' + sessionStorage.getItem("authToken")

}

}) {

return new Promise((resolve, reject) => {

axios.patch(url, dwAwrafUwata, config)

.then(response => {

resolve(response.data);

}, err => {

reject(err.response);

})

})

}

/**

* put 方法封装

* @param url

* @param data

* @returns {Promise}

*/

export function put(url, data = {}, config = {

"headers": {

'Content-Type': 'application/json', //设置跨域头部

"Authorization": 'JWT ' + sessionStorage.getItem("authToken")

}

}) {

return new Promise((resolve, reject) => {

axios.put(url, data, config)

.then(response => {

resolve(response.data);

}, err => {

reject(err.response);

})

})

}

App.vue(这是在src目录下的程序入口文件)

&lhttp://t;/div>

总结

常见问题

在使用动态版时,为什么称为动态呢,是因为访问地址和请求地址是同一个地址可端口号,例如我通过http://cmgos.com(默认端口80)访问项目,那么我的baseURL会自动的变为http:cmgos.com:80/api/,这么做的原因是当某一天项目迁移或者http改为https时,不用你再去更改请求地址,程序自动就完成了

数据请求地址配置不正确?如果你配置了baseURL,那么你封装的函数在使用时仅需传入基于baseURL的请求地址,例如传入login/那么请求地址会自动变为http:cmgos.com:80/api/login/,若未配置,那么可以直接传入整个请求地址

注意事项

在使用动态版时,由于没有使用拦截器,所以下面封装的函数在返回错误的时候需要写成err.response.data来获取返回的数据,但我写的是err.response,因为这样可以拿到(status)状态码等信息,若不需要判断返回的状态码,则改为err.response.data便可

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:接口api文档自动生成(接口api文档自动生成)
下一篇:使用Spring Boot上传文件功能
相关文章

 发表评论

暂时没有评论,来抢沙发吧~