对Axios的个人小结

一、axios的功能特点

1，在浏览器中发送XMLHttpRequest请求

2，在node.js中发送http请求

3，支持Promise API

4，拦截请求和响应

5，转换请求和响应数据

二、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的基本使用

npm install axios --save

import axios from 'axios'
axios({
    url:'',
    methods:'get'//默认情况下就是get 
}).then(res => {
    console.log(res)
})

//axios发送并发请求
axios.all([axios(),axios()]).then(results => {
    console.log(results)
})

//展开数组
.then(axios.spread(res1,res2) => {
    console.log(res1)
    console.log(res2)
})

//全局配置
axios.default.baseURL = 'http://23.207.32.32:8000'
axios({url:'/home/multidata'})
axios({url:'home/data})

四、常见的配置选项

请求地址
url:'/user'

请求类型
method:'get'

请求路径
baseURL:'httpbin.org'

请求前的数据处理
transformRequest:[function(data){}]

请求后的数据处理
transformResponse:[function(data){}]

自定义的请求头
headers:{'x-Requested-With':'XMLHttpRequest'}

URL查询对象
params:{
    type:'sell'
}

查询对象序列化函数
paramsSerializer:function(params){}

request body
data:{key:'aa'}

超时设置s
timeout:1000

跨域是否待Token
withCredentials:false

自定义请求处理
adapter:function(resolve,reject,config){}

身份验证消息
auth:{uname:'',pwd:'123'}

响应的数据格式:json/blob/document/arraybuffer/text/stream
responseType:'json'

五、axios实例

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

instance({
    url:'/ip'
}).then(res => {
    console.log(res)
})

instance({
    url:'/user-agent'
}).then(res => {
    console.log(res)
})

六、封装axios

//版本1 ->用函数回调出去
import axios from 'axios'
export function request(config,success,failure){
    //创建axios实例
    const instrance = axios.create({
        baseURl:'httpbin.org',
        timeout:5000
    })
    //发送真正的网络请求
    instrance(config)
    .then(res => {
        console.log(res)
        success(res)
    })
    .catch(err => {
        console.log(err)
        failure(err)
    })
}

import request from '...'
request({参数一},res => {console.log(res)},err => {console.log(err)})



//版本2 ->还是回调函数
import axios from 'axios'
export function request(config){
    //创建axios实例
    const instrance = axios.create({
        baseURl:'httpbin.org',
        timeout:5000
    })
    //发送真正的网络请求
    instrance(config.baseconfig)
    .then(res => {
        console.log(res)
        config.success(res)
    })
    .catch(err => {
        console.log(err)
        config.failure(err)
    })
}

import request from '...'
request({
    baseConfig:{
    
    },
    success:function{},
    failure:function{}
})

//版本3 ->使用Promise
import axios from 'axios'
export function request(config){
    return new Promise((resolve,reject) => {
        1,创建axios实例
        const instance = axios.create({
            baseURl:'httpbin.org',
            timeout:5000
        })
        
        2,发送真正的网络请求
        instance(config).then(res => {
            resolve(res)
        }).catch(err => {
            reject(err)
        })
    })


}

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

//版本4 ->最终版promise

import axios from 'axios'
export function request(config){
    1,创建axios实例
    const instance = axios.create({
        baseURl:'httpbin.org',
        timeout:5000
    })
    
    2,axios的拦截器
    2.1请求拦截
    instance.interceptors.request.use(config => {
        return config
    },err => {
        console.log(err)
    })
    2.2响应拦截
    instance.interceptors.response.use(res => {
        return res
    },err => {
        console.log(err)
    })

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

import request from '...'
instance({
    url:'/id',
}).then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})