网络请求axios

axios的定义

• axios是一个基于Promise，用于浏览器和node的HTTP客户端

axios的功能特点

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

axios框架的基本使用

• npm安装

npm install axios -S

发送pos请求的简单演示

axios({
    url: 'http://123.207.32.32:8000/home/multidata',
    method: 'pos'
}).then(res => console.log(res))

axios的请求参数

• baseURL：请求的根路径

baseURL = 'http://123.207.32.32:8000'

• timeout：请求超时时间

timeout = 5000

• method：发送请求所使用的方法，默认使用get方法

method = 'get'

• params：URL查询对象

params = {type: 'pop',page: 1}

• [更多请求参数请查阅：]http://www.axios-js.com/zh-cn/docs/#axios-request-config

发送并发请求

• axios.all()，接收一个数组作为参数，返回一个promise对象
• 使用axios.spread可将数组[res1, res2]展开为res1，res2

axios.all([
    axios({url: '/home/multidata'}),
    axios({url: '/home/data', params: {type: 'pop',page: 1}})
]).then(axios.spread(res1, res2) => {
    console.log(res1)
    console.log(res2)
})

创造axios实例将全局配置改为局部配置

• 调用create方法，该方法会返回一个axios实例，该实例同样会返回一个Promise对象

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

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

网络模块封装

• 将网络相关信息单独放入一个文件中，导出函数

//request.js
import axios from 'axios'
export function request(config) {
    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
    })
    // 拦截器
    // ……
    return instance(config)
}

• 使用

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

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

axios拦截器

• axios提供了拦截器，用于我们在每次发送请求或得到响应后，进行对应的处理

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

• 请求拦截

 axios.interceptors.request.use(config => {
     console.log(config)
     // 1.比如config中的一些不符合服务器的要求
     // 2.比如每次发送网络请求时，都希望在界面中显示一个请求的图标
     // 3.某些网络请求（比如登录），必须携带一些特殊的信息
     
     // 必须要返回拦截的对象
     return config
 }, err => {
     return err
 })

• 响应拦截

 instance.interceptors.response.use(res => {
     // console.log(res)
     return res.data
 }, err => {
     console.log(err)
     return err
 })
//3、发送真正的网络请求
return instance(config)