（十一）axios使用

axios

下载：npm install axios --save

起步使用

    Axios("http://123.207.32.32:8000/category"
    ).then(res => {
        console.log(res)
    }).catch(
        error => console.log(error)
    )  

并发请求

    Axios.all([Axios.get("http://123.207.32.32:8000/category"), 
              Axios.get("http://localhost:8081/#/")]
              ).then(Axios.spread((res1, res2) => {
                console.log(res1)
                console.log(res2)
              }))
            },

全局配置

import Axios from 'axios'
const Instance = Axios.create({
  baseURL: "http://123.207.32.32:8000", 
  timeout: 5000, 
})

Instance({
  url: '/category',
  method: 'get'
}).then(res => {
  console.log(res)
}).catch(error => {
  console.log(error)
})

axios封装

方案一

// 方案一
// export default (config, success, failure) => {
//     const Insatnce = axios.create({
//         url: "http://123.207.32.32:8000/category",
//         timeout: 5000
//     })

//     Insatnce(config)
//     .then(res => success(res))
//     .catch(err => failure(err))
// }

export function request(config, success, failure) {
    const Insatnce = axios.create({
        url: "http://123.207.32.32:8000/category",
        timeout: 5000
    })

    Insatnce(config)
    .then(res => success(res))
    .catch(err => failure(err))
}

使用

import {request} from './network/request'
  // 方案一使用
  request({
    url:'',
  }, 
  res => console.log(res), 
  err => console.log(err)
  )

方案二

// // 方案二 （使用Promise返回结果）
export function request(config){
    return new Promise((resolve, reject) => {
        const Insatnce = axios.create({
            url: "http://123.207.32.32:8000/category",
            timeout: 5000
        })
    
        Insatnce(config)
        .then(res => {   // 这是axios的then
            resolve(res)  // 这时执行Promise中的then
        })
        .catch(err => {  // 这是axios的catch
            reject(err) // 这时执行Promise中的catch
        })
    })

使用

  request({
    url:''
  })
  .then(res => console.log(res))
  .catch(err => console.log(err))

方案三

// 方案三
export function request(config){
    const Insatnce = axios.create({
        url: "http://123.207.32.32:8000/category",
        timeout: 5000
    })
//案例二中的Insatnce(config)之所以可以调用then和catch方法，是因为Insatnce(config)本身就是一个Promise对象，所以我们可以直接在这里返回，在实例中直接使用then和catch方法
    return Insatnce(config) 
}
 

使用

  request({
    url:''
  })
  .then(res => console.log(res))
  .catch(err => console.log(err))

拦截器

拦截器，可以做全局拦截axios.interceptors，也可以做局部拦截。这里的例子是局部拦截。
请求拦截：Insatnce.interceptors.request.use()
响应拦截：Insatnce.interceptors.response.use()
axios提供拦截器，用于每次发送请求或者得到响应后，进行对应的处理

请求拦截可以做的事情
1、请求拦截中错误拦截较少，通常都是配置相关拦截。
2、可能的错误拦截，比如请求超时，可以将页面跳转到一个错误页面。

响应拦截可以做什么？
1、响应的成功拦截主要是对数据进行过滤。


2、响应的失败拦截，可以根据status判断报错的错误码，跳转到不同的错误页面。

总结理解