axios 网络请求

一、安装 axios 依赖

npm install axios --save

二、导入axios

import axios from 'axios'

三、基础用法

1、不传参数（默认是get请求 ）

axios({
  url: 'http://httpbin.org/get',
  method:'get'//可以省略 不写默认是get
}).then(res => {
  console.log(res);
})

2、不传参数（第二种写法）

axios.get('http://httpbin.org/get').then(res => {
 console.log(res);
})

3、传参（第一种写法）

axios({
 url:'http://httpbin.org/get?type=sell&id=1'
}).then(res => {
 console.log(res);
})

4、传参（第二种写法）

axios({
 url:'http://httpbin.org/get',
 params:{//专门针对get请求的参数拼接
  type:'sell',
  id:1
 }
}).then(res => {
 console.log(res);
})

因为支持 Promise 所以直接用 then 就可以拿到返回结果

注意：如果是get请求用params 传递参数，如果是post请求需要用data

四、axios 并发请求

说明：发送两个请求，这两个请求都到达后在执行。

使用 axios.all([axios(),axios(),axios()]).then()

axios.all([axios({
  url: 'http://httpbin.org/get'
}), axios({
  url: 'http://httpbin.org/get',
  params: {//专门针对get请求的参数拼接
    type: 'sell',
    id: 1
  }
})]).then(results => {
  console.info(results)//得到是一个数据
})

直接then() 拿到的结果是个数据 ，使用axios.spread 拿到每个请求的返回结果

axios.all([axios({
  url: 'http://httpbin.org/get'
}), axios({
  url: 'http://httpbin.org/get',
  params: {//专门针对get请求的参数拼接
    type: 'sell',
    id: 1
  }
})]).then(axios.spread((res1,res2)=>{
  console.log(res1);
  console.log(res2);
}))

五、axios全局配置

//全局配置完成后请求的时候直接写请求方法名称就行
axios.defaults.baseURL='http://httpbin.org/'  

axios.defaults.timeout=5000

只能应对服务器在同一个地址里面，如果请求的数据不在同一个服务器用全局配置就不合适了。（比如：首页数据在一个服务器，列表数据在另一个服务器），那么就要创建对应的axios实例

六、创建对应的axios实例

第一个服务器地址 里面有多个请求，如果只有一个请求直接写个地址就行了，不用创建实例这么麻烦

const instance1 = axios.create({
  baseURL: 'http://httpbin.org/',
  timeout: 5000
})

instance1({
  url: '/home'
}).then(res => {
  console.log(res);
})

instance1({
  url: '/list'
}).then(res => {
  console.log(res);
})

第二个服务器地址，在创建一个axios实例

const instance2 = axios.create({
  baseURL: 'http://192.168.1.1',
  timeout: 6000
})
instance2({
  url: '/list'
}).then(res => {
  console.log(res);
})

七、axios网络封装

在src文件夹下面创建一个network文件夹，在创建一个request.js

export function 在里面可以导出多个，如果用export default 只能导出一个

1、第一种写法（回调函数方式）

import axios from "axios"
/**
 * 
 * @param {请求地址} config 
 * @param {请求成功} success 
 * @param {请求失败} failure 
 */
export function request(config, success, failure) {
    //1.创建axios实例
    const instance = axios.create({
        baseURL: 'http://httpbin.org',
        timeout: 5000
    })

    //2.发送真正的网络请求
    instance(config).then(res => {
        success(res)
    }).catch(err => {
        failure(err)
    }) 
}

在页面调用

import { request } from './network/request'

request({
  url: 'get'
}, res => {
  console.log(res);
}, err => {
  console.log(err);
})

2、第二种写法（回调函数方式）

import axios from "axios"
/**
 * 
 * @param {config是一个对象,传入的时候所有的需要的都放到config里面了} config 
 */
export function request(config) {
    //1.创建axios实例
    const instance = axios.create({
        baseURL: 'http://httpbin.org',
        timeout: 5000
    })

    //2.发送真正的网络请求
    instance(config.baseConfig).then(res => {
        config.success(res)
    }).catch(err => {
        config.failure(err)
    })
}

在页面调用

request({  baseConfig: {  },  success: function (res) {  },  failure: function (err) {  }})

3、第三种写法（Promise方式）

import axios from "axios"
/**
 *  Promise方式
 * @param {*} config 
 * @returns 
 */
export function request(config) {
    return new Promise((resolve, reject) => {
        //1.创建axios实例
        const instance = axios.create({
            baseURL: 'http://httpbin.org',
            timeout: 5000
        })

        //2.发送真正的网络请求
        instance(config)
            .then(res => {
                resolve(res)
            }).catch(err => {
                reject(err)
            })
    })
}

在页面调用

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

4、第四种写法（Promise方式）推荐使用

import axios from "axios"

export function request(config) {
     //1.创建axios实例
     const instance = axios.create({
        baseURL: 'http://httpbin.org',
        timeout: 5000
    })

    //2.发送真正的网络请求  instance 本身返回就是Promise
     return instance(config)  
}

在页面调用

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

八、axios 拦截器使用

为什么要做请求拦截，请求拦截的作用：

• 比如config中的一些信息不符合服务器的要求
• 比如每次发送网络请求时，都希望在界面中显示一个请求的图标
• 某些网络请求，必须携带一些特殊信息（比如登录需要携带token）

四种情况：

• 请求成功
• 请求失败
• 响应成功
• 响应失败

axios.interceptors 拦截全局

instance.interceptors 拦截创建的这个实例

instance.interceptors.request.use() 请求拦截（传两个函数，一个请求成功，一个请求失败）

instance.interceptors.response.use() 响应拦截（传两个函数，一个响应成功，一个响应失败）

拦截以后必须 return 出去，不然后面拿不到数据

import axios from "axios"

/**
 * 拦截器使用
 * @param {*} config 
 * @returns 
 */
export function request(config) {
    //1.创建axios实例
    const instance = axios.create({
        baseURL: 'http://httpbin.org',
        timeout: 5000
    })

    //2.axios的拦截器
    //axios.interceptors //这种写法是拦截全局
    //instance.interceptors 拦截创建的这个实例
    //request.use() 拦截请求，传两个函数，一个请求成功，一个请求失败
    instance.interceptors.request.use(config => {
        //为什么要做请求拦截，请求拦截的作用
        //1.比如config中的一些信息不符合服务器的要求

        //2.比如每次发送网络请求时，都希望在界面中显示一个请求的图标

        //3.某些网络请求，必须携带一些特殊信息（比如登录需要携带token）
        console.log(config);
        return config //必须return出去，不然后面拿不到数据
    }, err => {
        console.log(err);
    });

    //响应拦截
    instance.interceptors.response.use(res => {
        console.log(res);
        return res;//必须return出去，不然后面拿不到数据
    }, err => {
        console.log(err);
    });

    //3.发送真正的网络请求
    return instance(config)
}

请求超时重新发送请求

import axios from 'axios'
import { Message } from 'element-ui';
import config from '../../config'


axios.defaults.timeout = 10000
axios.defaults.baseURL = config.url


// 请求拦截 加token
axios.interceptors.request.use(
    config => {
        if (sessionStorage.getItem('token')) {
            config.headers.Authorization = JSON.parse(sessionStorage.getItem('token')).SignFlag
        }
        return config
    },
    err => { 
        return Promise.reject(err)
    },
)
  // 响应拦截 错误提示
axios.interceptors.response.use(
    response => {
        if (response.status === 200 && response.data && !response.data.isError && !response.data.isNoOpenID) { // 200 请求成功 并且 接口内部返回成功
            return Promise.resolve(response.data)
            // return response
        } else {
            Message.error(response.data.errorMessage || response.data.noOpenMessage || '接口出错')
            return Promise.reject(response)
        }
    },
    error => { 
        if (error.response?.status) {
            switch (error.response.status) {
                case 401: Message.error('未授权，请登录'); break;
                case 403: Message.error('拒绝访问'); break;
                case 404: Message.error('找不到请求'); break;
                case 500: Message.error('请求错误'); break;
                default:
                Message.error(error.response.statusText)
            }
        }else{      
            var config = error.config;
            config.retry = 1;
            config.retryDelay = 1000;
            if (!config || !config.retry) return Promise.reject(error);
            config.__retryCount = config.__retryCount || 0;
            if (config.__retryCount >= config.retry) {
                Message.error('请求超时');  
                return Promise.reject(error);
            }
            config.__retryCount += 1;
            var backoff = new Promise(function (resolve) {
                setTimeout(function () {
                    resolve();
                }, config.retryDelay || 1);
            });

            return backoff.then(function () {
                console.log('%c%s%o', 'color:red', '请求超时!重新发起请求:',JSON.parse(JSON.stringify(config)));    
                return axios(config);
            });
            
            
            // if(error.toString().includes('timeout')){
            //   Message.error('请求超时');  
            //   return Promise.reject(error)
            // }
        }
        return Promise.reject(error.response)
    },
)
export default axios