axios学习优化及使用

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