认识axios

• 功能特点
  • 在浏览器中发送XMLHttpRequests请求
  • 在node.js中发送http请求
  • 支持Promise API
  • 拦截请求和响应
  • 转换请求和响应
  • 转换请求和响应数据

axios请求方式

• 支持多种请求方式：
  • axios(config)
  • axios.request(config)
  • axios.get(url[, config])
  • axios.delete(url[,config])
  • axios.head(url[, config])
  • axios.post(url[, data[,config]])
  • axios.put(url[,data[,config]])
  • axios.patch(url[,data[,config]])
• 有时候，我们可能需要同时发送两个请求
  • 使用axios.all, 可以放入多个请求的数组
  • axios.all([])返回的结果是一个数字，使用axios.spread 可将数组[res,res2]展开res1，res2

常见的配置选项

• 请求地址 url: '/user',
• 请求类型 method:'get',
• 请求根路径：baseURL:'http://www.mt.com/api,'
• 请求前的数据处理：transformRequest:[function(data){}],
• 请求后的数据处理：transformResponse: [function(data){}],
• 自定义的请求头：headers:['x-Requested-With': 'XMLHttpRequest'],
• URL查询对象：params:{id:12},
• 查询对象序列化函数 paramsSerializer:function(params){}
• request body data: {key:'aa'}
• 超时设置 timeout: 1000

axios的创建实列

• 为什么要创建axios的实列呢？
  • 当我们从axios模块中导入对象时，使用的实列是默认的实列
  • 当给该实列设置一些默认配置时，这些配置就被固定下来了。
  • 但是后续开发中，某些配置可能会不太一样
  • 比如某些请求需要使用特定的bashURL或者timeout等
  • 这个时候，我们就可以创建新的实列，并且传入属于该实列的配置信息

const instance = axios.create({
    baseURL: "http://123.207.32.32:1888"
})
instance.post("/02_param/postjson", {
    name: "lili",
    age: 18
}).then(res => {
    console.log("res:", res)
})

请求和响应拦截器

• axios也可以设置拦截器：拦截每次请求和响应
  • axios.interceptors.request.use(请求成功拦截，请求失败拦截)
  • axios.interceptors.response.use(响应成功拦截，响应失败拦截)

axios.interceptors.request.use((config)=>{
    console.log("请求成功的拦截")
    return config
}, err => {
    console.log("请求失败的拦截")
    return err
})

axios.interceptors.response.use((res) => {
    console.log("响应成功拦截")
    return res.data
}, err => {
    console.log("响应失败的拦截")
})

axios请求库封装（简洁版）

class HYRequest {
    constructor(baseURL) {
      this.instance = axios.create({
             baseURL,
             timeout
        })
    }
    
    request(config) {
      return new Promise((resolve, reject) => {
         this.instance.request(config).then(res => {
            resolve(res.data)
         }).catch(err => {
            reject(err)
         })
      })
    }
    
    get(config) {
        return this.request({ ...config, method: "get"})
    }
    
    post(config) {
        return this.request({ ...config, method: "post"})
    }     
}