axios需要进行一些什么配置 1. 设置请求的默认地址baseUrl 2. 设置请求超时时间 3. Post请求头的设置 4. 拦截器(请求拦截与响应拦截) 5. 封装post, get 请求 (此示例没有封装,可根据项目情况而定,因为封装后,对于一些特殊接口设置不是太灵活,需要我们项目没有选择封装,如果请求方法比较单一的,可以考虑封装) axios完整封装代码 我们可以将上面的都封装成一个文件axios.js放在util文件夹中 代码如下: import axios from 'axios' const ConfigBaseURL = 'https://localhost:3000/' // 使用create方法创建axios实例 const Service = axios.create({ baseURL: ConfigBaseURL, //1. 设置默认地址 timeout: 7000 // 2. 请求超时时间 }) //3. 给POST请求添加请求头设置(不同项目,值不一样) Service.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; //4.1 添加请求拦截器 Service.interceptors.request.use(config => { loadingInstance = Loading.service({ lock: true, text: 'loading...' }) return config }) //4.2 添加响应拦截器 Service.interceptors.response.use(response => { loadingInstance.close() // console.log(response) return response.data }, error => { console.log('TCL: error', error) const msg = error.Message !== undefined ? error.Message : '' Message({ message: '网络错误' + msg, type: 'error', duration: 3 * 1000 }) loadingInstance.close() return Promise.reject(error) }) 引用封装的文件 main.js中引用,代码如下: import axios from './util/axios.js' Vue.prototype.$axios = axios ; 引用后,直接使用 this.$axios.get 或 this.$axios.post 即可发起请求 疑问 baseURL写死在文件中,如果打包后,想更改地址,就有问题了,如何解决这个问题,下篇文章再讨论,欢迎关注,公众号:bug收集 原创文章,转载请写明出处 bug 收集 作者:doubleyong 网址:http://bugshouji.com/shareweb/t1335 |
|
最新喜欢:smile
|