axios学习及优化理解
因为要用axios拿到数据,所以了解了axios的一个简单用法
一般商城项目开发中服务器以后不可能只在同一个地址请求,所以不会使用全局的axios ,这样就要创建单独的实例,每个实例拥有自己的timeout,对应的方法等等,之后在请求接口的时候就直接拿到这个实例传入url
虽说可以在某个发送网络请求的组件中直接导入axios ,在create中发送网络请求之后拿到结果,保存起来,并在template中展示,但这样对axios这个第三方框架依赖性太强,为了日后的维护且基于组件化开发,单独建一个文件夹,把axios这个第三方框架封装在一个js里面
- 最初写法
import axios from 'axios'
//以后肯定要导出多个实例 考虑到拓展性 所有这里不适合用defeault,
//使用时候调用request就可以发送请求
//参数success,failure都是函数原因在下面2中
export function request(config, success, failure) {
// 1.创建axios的实例
const instance = axios.create({
baseURL: 'http://xxx.xxx.xx.xx:xxxx',
timeout: //自己根据情况而定
})
//2.网络拦截
// 3.发送真正的网络请求
//把参数config传入实例,.then拿到结果res,
//result要给调用者传过去,也就是要回调出去的 ,回调出去的方法之一此时让传入config的同时传入函数success和函数failure,通过它们回调出去
instance(config).then(
//相当于传入函数res 、err,传入后就能拿到函数success和failure ,反过来把结果回调出去
res => {
// console.log(res);
success(res);
})
.catch(err => {
// console.log(err);
failure(err)
})
}
在这里插入代码片
- promise形式
import axios from 'axios'
//也可以只穿一个参数,config这里必须传一个success,意味着要从config中取出一个success
export function request(config) {
return new Promise((resolve,reject) =>{
//1.创建axios的实例
const instance = axios.create({
baseURL: 'http://xxx.xxx.xx.xx:xxxx',
timeout: //自己根据情况而定
})
})
//2.拦截器
//3.发送真正的网络请求
instance(config.baseConfig)
.then(res => {
// console.log(res);
resolve(res);
})
.catch(err => {
// console.log(err);
reject(err)
})
}
}
使用时:
//先引入
//因为导出用的不是default,所以文件名要加{}
import {xxx} from 'path'
request ({
Baseconfig:{},
success:function(res){},
failure:function(err){}
})
- 最终的axios简化版:
export function request(config) {
const instance = axios.create({
baseURL: 'http://xxx.xxx.xx.xx:xxxx',
timeout: //
)}
//2.拦截器
// 2.1.请求拦截的作用
instance.interceptors.request.use(config => {
return config
//比如config中的一些信息不符合服务器的要求 比如每次发送网络请求时, 都希望想在界面中显示一个请求的图标之类
}, err => {
console.log(err);
})
// 2.2.响应拦截
instance.interceptors.response.use(res => {
return res.data
}, err => {
console.log(err);
})
//3.发送真正的网络请求
return instance (config)
}
因为在源代码中new instance返回的是AxiosInstance,且instance (config)相当于源代码中config:AxiosRequestconfig,而
(config:AxiosRequestconfig):AxiosPromis
所以 return instance (config)本身返回的就是一个promise,其他地方可以直接.then