axios

axios的功能和特点

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

安装

npm install axios --save
或者
yarn add axios

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(config)

 axios({
       url:'http://123.207.32.32:8000/home/multidata', //配置路径
       methods:'GET' //配置请求参数
     }).then(res =>{  //因为返回的是一个Promise对象，所以用.then方法接收数据
       console.log(res)
     })

url参数拼接

例如发送请求，后面带的参数是拼接的：

'http://123.207.32.32:8000/home/data?type=sell&page=3'问号的内容拼接

axios({
       url:'http://123.207.32.32:8000/home/data',
       params:{  //在这里填写后面的信息  
         type:'sell',
         page: 3   
       }   //axios自动帮我们拼接成 (Request URL: http://123.207.32.32:8000/home/data?type=sell&page=3)
     }).then(res =>{
       console.log(res)
     })

axios发送并发请求

同时发送两个请求

axios.all

axios.all([  //用all发送并发请求，和Promise.all一样
          axios({url:'http://123.207.32.32:8000/home/multidata'}),
          axios({url:'http://123.207.32.32:8000/home/data',params:{type:'sell',page:3}})
        ])
        .then(result => {  //拿到的数据也是一个数组，里面存放的是对应的数据
          console.log(result[0])
          console.log(result[1])

        });

axios.spread 展开请求结果数组

如果不想以数组的形式接收结果，那么就用axios.spread 来展开数组

 axios.all([
          axios({url:'http://123.207.32.32:8000/home/multidata'}),
          axios({url:'http://123.207.32.32:8000/home/data',params:{type:'sell',page:3}})
        ])
        .then(axios.spread((res1,res2)=>{ //展开数据，依次是第一次请求的数据，第二次请求的数据
          console.log(res1)
          console.log(res2)
        }));

全局配置

事实上, 在开发中可能很多参数都是固定的.

这个时候我们可以进行一些抽取, 也可以利用axiox的全局配置

axios默认配置

   axios.defaults.baseURL = 'http://123.207.32.32:8000' //配置默认路径
      axios.defaults.timeout = 5000   //配置超时时间，这里是毫秒
      axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded"
      axios.all([
          axios({url:'/home/multidata'}),
          axios({url:'/home/data',params:{type:'sell',page:3}})
        ])
        .then(axios.spread((res1,res2)=>{
          console.log(res1)
          console.log(res2)
        }));

注意事项

get请求对应的是params:{}这个配置 ， params是给url拼接的路径

post请求对应的是data:{} 这个配置 ， data是给请求体带上的参数

这两种情况要区分开来

axios的实例

const instancel = axios.create({  //使用axios.create创建一个实例
    baseURL: 'http://123.207.32.32:8000',  //里面是默认配置
    timeout: 5000
})
instancel({    //实例可以调用axios的方法发送请求
    url: '/home/multidata'
}).then(res => {
    console.log(res)
})
instancel({
    url: '/home/data',
    params: {
        type: 'sell',
        page: 3
    }
}).then(res => {
    console.log(res)
})

const instancel2 = axios.create({  //再创建一个实例，里面是不同地址的配置，超时也是不一样的
    baseURL: 'http://xxx.xxx.xxx.xxx:xxx', 
    timeout: 10000
})
instancel({   
    url: '/home/multidata'
}).then(res => {
    console.log(res)
})
instancel({
    url: '/home/data',
    params: {
        type: 'sell',
        page: 3
    }
}).then(res => {
    console.log(res)
})

封装axios

第一种：

import axios from 'axios'

export function request(config) {

    return new Promise((resolve, reject) => {
        const instance = axios.create({  
            baseURL: 'http://123.207.32.32:8000', //配置
            timeout: 5000
        })
        instance(config).then(res => resolve(res)).catch(err => reject(err))
    })

}

第二种，更简洁，因为axios本身就是返回一个Promise对象，那么，可以直接返回axios的实例

import axios from 'axios'

export function request(config) {

    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
    })

    return instance(config) //因为instance本身就返回Promise对象，所以可以直接返回


}

调用的两种方式：

通过.then调用：

import { request } from './netWork/request'
request({ url: '/home/data', params: { type: 'sell', page: 3 } })
.then(res => {
    console.log(res)
})

通过async/await方式调用:

import { request } from './netWork/request'
async function getInfo() {
    const res = await request({ url: '/home/data', params: { type: 'sell', page: 3 } });
    console.log(res)
}
getInfo()

axios拦截器

interceptors.request: 请求拦截

interceptors.response:响应拦截

import axios from 'axios'

export function request(config) {

    const instance = axios.create({
            baseURL: 'http://123.207.32.32:8000',
            timeout: 5000
        })
      	  //1.请求拦截(拦截到本次的请求)
    instance.interceptors.request.use(config => {
            // console.log(config) //这里是本次请求的参数
            //作用
            //1.比如config中的一些信息不符合服务器的要求，那么就可以在这里处理
            //2.比如每次发送网络请求时，都希望在界面中显示一个请求图标
            //3.某些网络请求(比如登录(token)),必须携带一些特殊的信息
            return config //如果不返回,外面就无法使用
        }, err => {  //拦截失败
            console.log(err)
        })
        // 2.响应拦截(拦截到返回的结果)
    instance.interceptors.response.use(result => {
        // console.log(result) //获取到成功的数据
        //可以在这里先一步处理拦截到的数据，再返回出去
        return result.data  //如果不返回，外面接收不到数据
    }, err => { //拦截失败
        console.log(err)
    })

    return instance(config) 

}

无注释版：

import axios from 'axios'

export function request(config) {

    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
    })

    instance.interceptors.request.use(config => {

        return config
    }, err => {
        return err
    })

    instance.interceptors.response.use(result => {

        return result.data
    }, err => {
        return err
    })

    return instance(config)


}