Axios 小白从安装到基础的使用与封装

安装与使用

安装：
npm install --save axios
使用：
import axios from 'axios'

文章下附Giee地址

一、请求类型

get、delete方式类似都可以用params请求，delete可以在请求体中请求，post、put、patch类似都是使用请求体请求并且可以有json/form-data两种方式

GET

get请求的两种写法 (使用config 将参数放在params中)

    axios.get('/url', {
        params: {
            id: 12
        }
    }).then((res) => {
        console.log(res)
    })
    //另外一种写法
    axios({
        method: 'get',
        url: '/url',
        params: {
            id: 12
        }
    }).then(res => {
        console.log(res)
    })

POST

post请求 (将参数放在请求体中)，两种方式json/form-data

// applicition/json
 let data = {
    id: 12
 }
 axios.post('/url', data).then(res => {
    console.log(res)
 })
 axios({
    method: 'post',
    url: '/post',
    data: data
 })
// form-data 表单提交（图片上传，文件上传）
    let formData = new FormData()
    for (let key in data) {
        formData.append(key, data[key])
    }
    axios.post('/url', formData).then(res => {
        console.log(res)
    })

PUT

put 请求 (将参数放在请求体中)，两种方式json/form-data

    // put请求
    axios.put('/put',data).then(res=>{
        console.log(res)
    })

PATCH

patch请求 (将参数放在请求体中)，两种方式json/form-data

    // patch请求
    axios.patch('/patch',data).then(res=>{
        console.log(res)
    })

DELETE

delete (将参数放在请求体中 也可以将参数放在params中)

// delete请求
axios.delete('/delete', {
    params: {
        id: 12
    }
})
axios.delete('/delete', {
    data: {
        id: 12
    }
})

二、并发请求

并发请求：同时进行多个请求，并统一处理返回值

axios.all(
    [
        axios.get('/data.json'),
        axios.get('/city.json')
    ]
).then(
    axios.spread((dataRes, cityRes) => {
        console.log(dataRes, cityRes)
    })
)

三、axios实例

使用场景： 后端接口地址有多个，并且超时时长不一样或者业务逻辑不同

axios.create({
    baseURL: 'http://localhost:8080', // 请求的域名，基本地址
    timeout: 1000, // 请求超时时长（ms）
    url: '/data.json', //请求路径
    method: 'get,post,put,patch,delete', // 请求方法
    headers: {
        token: ''
    }, // 请求头
    params: {}, //请求参数拼接在url上
    data: {}, //请求参数放在请求体
})

配置
全局配置、实例配置、请求配置
优先级：全局配置<实例配置<请求配置

    // 1.axios全局配置
    axios.defaults.timeout =1000
    axios.defaults.baseURL = 'http://localhost:8080'
    // 2.axios实例配置
    let instance = axios.create()
    instance.defaults.timeout = 3000
    // 3.axios请求配置
    instance.get('/data.json',{
        timeout:5000
    })

四、拦截器

拦截器：在请求或响应被处理前拦截他们
请求拦截器的用法

// 请求拦截器
 axios.interceptors.request.use(config => {
    // 在发送请求前做些什么
    return config
 }, err => {
    // 在请求错误的时候做些什么
    return Promise.reject(err)
 })

响应拦截器的用法

 // 响应拦截器
 axios.interceptors.response.use(res => {
    // 请求成功对响应数据做处理
    return res
 }, err => {
    // 响应错误做些什么
    return Promise.reject(err)
 })

取消拦截器

let interceptors = axios.interceptors.request.use(config => {
        config.headers = {
            auth: true
        }
        return config
    })
axios.interceptors.request.eject(interceptors)

五、错误处理与取消处理

错误处理：在拦截器中用err，如果某请求后面需要单独处理错误，则使用catch()

// 例子：实际开发过程中，一般添加统一错误处理
    let instance = axios.create({})
    instance.interceptors.request(config => {
        return config
    }, err => {
        // 请求错误 一般http状态码以4开头，常见：401超时，404 not found
        $('#modal').show()
        setTimeout(() => {
            $('#modal').hide()
        }, 2000)
        return Promise.reject(err)
    })
    instance.interceptors.response.use(res => {
        return res
    }, err => {
        // 响应错误处理 一般http状态码以5开头，500 系统错误，502, 系统重启
        $('#modal').show()
        setTimeout(() => {
            $('#modal').hide()
        }, 2000)
        return Promise.reject(err)
    })
    instance.get('/data.json').then(res=>{
        console.log(res)
    }).catch(err=>{
            //单独处理错误样式
        console.log(err)
    })

六、取消请求

用于取消正在进行的http请求

let source = axios.CancelToken.source()
axios.get('/data.json', {
    cancelToken: source.token
}).then(res => {
    console.log(res)
}).catch(err => {
        //取消请求后返回的messge信息
    console.log(err)
})

// 取消请求(message可选)
source.cancel('cancel http')

七、封装axios

// service 循环遍历输出不同的请求方法
let instance = axios.create({
    baseURL: 'http://localhost:9000/api',
    timeout: 1000
})
const Http = {}; // 包裹请求方法的容器

// 请求格式/参数的统一
for (let key in service) {
    let api = service[key]; // url method
    // async 作用：避免进入回调地狱
    Http[key] = async function(
        params, // 请求参数 get：url，put，post，patch（data），delete：url
        isFormData = false, // 标识是否是form-data请求
        config = {} // 配置参数
    ) {
        let newParams = {}

        //  content-type是否是form-data的判断
        if (params && isFormData) {
            newParams = new FormData()
            for (let i in params) {
                newParams.append(i, params[i])
            }
        } else {
            newParams = params
        }
        // 不同请求的判断
        let response = {}; // 请求的返回值
        if (api.method === 'put' || api.method === 'post' || api.method === 'patch') {
            try {
                response = await instance[api.method](api.url, newParams, config)
            } catch (err) {
                response = err
            }
        } else if (api.method === 'delete' || api.method === 'get') {
            config.params = newParams
            try {
                response = await instance[api.method](api.url, config)
            } catch (err) {
                response = err
            }
        }
        return response; // 返回响应值
    }
}

// 拦截器的添加
// 请求拦截器
instance.interceptors.request.use(config => {
    // 发起请求前做些什么
    Toast.loading({
        mask: false,
        duration: 0, // 一直存在
        forbidClick: true, // 禁止点击
        message: '加载中...'
    })
    return config
}, () => {
    // 请求错误
    Toast.clear()
    Toast('请求错误，请求稍后重试')
})
// 响应拦截器
instance.interceptors.response.use(res => {
    // 请求成功
    Toast.clear()
    return res.data
}, () => {
    Toast.clear()
    Toast('请求错误，请求稍后重试')
})

附：node后台接口服务

后台接口服务目录在gitee代码仓库根目录的axios_node下
如何启动？
进入axios_node目录，首先需要安装依赖npm install，依赖安装完成后输入node index.js启动服务

代码仓库地址 https://gitee.com/EverZc/VueAxios.git

如需文章上方axios X-Mind思维脑图文件，关注微信公众号：文靖撩知识 ，回复axios 即可领取。