个人技术总结——Axios的使用

222100305庞财莹 2024-06-06 16:41:17

Axios

Axios
1.技术概述
2.技术详述
2.1安装方式
2.2Axios的请求方法
2.2.1get请求
2.2.2post请求
2.2.3put请求
2.2.4patch请求
2.2.5delete请求
2.2.6并发请求
2.3Axios实例
2.3.1axios全局配置
2.3.2axios实例配置
2.3.3直接在axios请求上配置
2.4拦截器
2.4.1请求拦截器
2.4.2响应拦截器
2.4.3移除拦截器
2.4.4错误请求
2.4.5取消请求
2.5学习后实践——request封装
3.总结

1.技术概述

axios全称：（ajax-I/O-system）是基于promise用于浏览器和node.js的http客户端，因此可以使用Promise API

ajax是异步网络请求，可以使页面无刷新请求数据，还可以防止CSRF(跨域请求伪造)。
实现ajax的方式有①jQuery封装ajax好用，但是没必要因为ajax引入jQuery框架②原生的XML HttpRequests的配置和调用方式都很繁琐，实现异步请求十分麻烦
所以选择学习使用axios。

2.技术详述

2.1安装方式

npm install axios

在vue项目中的main.js中引入axios

import axios from 'axios'
Vue.prototype.$axios = axios

在组件中使用axios

<script>
    export default {
        mounted(){
            //直接使用方法
            this.$axios.get('url').then(res=>{
                //打印返回的数据
                console.log(res);
            })
        }
    }
</script>

2.2Axios的请求方法

2.2.1get请求

//请求格式类似于 http://localhost:8080/goods.json?id=1
//方法一：
//axios上有get this.$axios.get( 'url',{ params:{} } ).then(res=>{},err=>{})
this.$axios.get('url',{
    params:{id: 1},
}).then(res=>{
    console.log(res)
},err=>{
    console.log(err)
})

//方法二：将请求类型写入
this.$axios({
    method:'get',
    url:'url',
    params:{
        id:1
    }
}).then(res=>{
    console.log(res)
},err=>{
    console.log(err)
})

// 获取远端图片
this.$axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream'
}).then(res=> {
    //对文件流进行写入
  res.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});

2.2.2post请求

form-data表单提交，图片上传，文件上传时用到该类型比较多
application/json 一般用于ajax异步请求

//方法一 
this.$axios.post('url',{
    id:1
}).then(res=>{
    console.log(res)
},err=>{
    console.log(err)
})

this.$axios({
    method:'post',
    url:'url',
    data:{
        id:1
    }
}).then(res=>{
    console.log(res)
},err=>{
    console.log(err)
})

form-data请求

//写入要请求的参数
let data = {}
//使用FormData创建formdata实例
let formdata = new FormData()
for (let key in data){
    //append为formdata添加属性
    formdata.append(key,data[key])
}
this.$axios.post('/url',formdata).then(res=>{
    console.log(res)
},err=>{
    console.log(err)
})

2.2.3put请求

this.$axios.put('url',{
    id:1
}).then(res=>{
    console.log(res.data)
})

2.2.4patch请求

this.$axios.patch('url',{
    id:1
}).then(res=>{
    console.log(res)
})

2.2.5delete请求

this.$axios.delete('url',{
    params:{
        //比如要删除指定id的内容，也需要传递参数
        id:1
    }
}).then(res=>{
    //删除成功会返回
    console.log(res)
})

2.2.6并发请求

同时发送多个请求，并在then时统一处理res值，将请求写成数组形式进行请求

this.$axios.all([
    //以数组形式请求
    this.$axios.get('/url1',data1),
    this.$axios.get('/url2',data2)
]).then(
    //使用this.$axios.spread展开res
    this.$axios.spread((res1,res2)=>{
        console.log(res1)
        console.log(res2)
    })
)

2.3Axios实例

使用this.$axios.create创建axios实例对象

axios实例的常见配置

baseURL:string写入请求的域名。
timeout:以Number形式写入请求超时的时长，单位为ms，超过该时长则判断为超时
url:请求路径
method:请求方法
headers：请求头。为Object对象。具体在http中进行学习
params:请求参数，将参数拼接在url上面，类型为object，是明文请求
data：请求参数，将参数放入请求体当中，类型为object，不是明文请求

let Axiosinstance = this.$axios.create({
                baseURL: 'http://localhost:9090',
                timeout: 2000
            })
//Axiosinstance现在为axios实例对象了，可以调用axios上的方法        
Axiosinstance.get('url').then(res=>{
    console.log(res);
})

2.3.1axios全局配置

this.$axios.defaults.配置

//配置全局的超时时长
this.$axios.defaults.timeout = 2000;
//配置全局的基本URL
this.$axios.defaults.baseURL = 'http://localhost:8080';

2.3.2axios实例配置

首先创建一个实例this.$axios.create(),在实例身上加配置

let AxiosInstance = this.$axios.create();
AxiosInstance.defaults.timeout =3000

2.3.3直接在axios请求上配置

直接在axios请求上配置,采用key：value形式即可

this.$axios.get('url',{
                timeout: 3000
                params:{}
            }).then()

若在多次对同一配置进行了多次设置，则遵循优先级：请求配置 > 实例配置 >全局配置

2.4拦截器

拦截器：在请求或响应被处理前拦截它们

2.4.1请求拦截器

interceptor意思为拦截器

this.$axios.interceptors.request.use

this.$axios.interceptors.request.use(config=>{
    //请求前进行处理
    return config
},err=>{
    //请求错误处理
    return Promise.reject(err)
})

//直接在axios实例上创建拦截器
let Axiosinstance = $axios.create();
Axiosinstance.interceptors.request.use(config=>{
    return config
},function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  })

2.4.2响应拦截器

this.$axios.interceptors.response.use(res=>{
                //请求成功对响应数据做处理

                return res //该返回对象会传到请求方法的响应对象中
            },err=>{
                // 响应错误处理

                return Promise.reject(err);
            })

2.4.3移除拦截器

eject

let myInterceptor = this.$axios.interceptors.request.use(config=>{return config});
//取消拦截
this.$axios.interceptors.request.eject(myInterceptor);

let instance = this.$axios.interceptors.request.use(config=>{
                config.headers = {
                    token: ''
                }
                return config
            })
            
//取消拦截
this.$axios.interceptors.request.eject(instance);

2.4.4错误请求

this.$axios.get('/url').then(res={

            }).catch(err=>{
                //请求拦截器和响应拦截器抛出错误时，返回的err对象会传给当前函数的err对象
                console.log(err);
            })

2.4.5取消请求

let source = this.$axios.CancelToken.source();

this.$axios.get('url',{
                cancelToken: source
            }).then(res=>{
                console.log(res)
            }).catch(err=>{
                //取消请求后会执行该方法
                console.log(err)
            })

//取消请求，参数可选，该参数信息会发送到请求的catch中
source.cancel('取消后的信息');

2.5学习后实践——request封装

在学习了axios的相关知识之后，进行了request的封装，方便请求。


```javascript
import axios from "axios";
// 创建axios，赋给变量service
const request = axios.create({
  baseURL:  'http://49.233.xx/admin',//后端地址
    timeout: 15000,   // 超时
});

//添加请求拦截器
request.interceptors.request.use(
    function (config) {
        config.headers['Access-Control-Allow-Origin'] = '*';
        //在发送请求之前做一些事情
        return config;
    },
    function (error) {
        //队请求错误做些什么
        return Promise.reject(error);
    }
);
//添加响应拦截器
request.interceptors.response.use(
    function (response) {
        //使用响应数据返回响应；
        const data = response;
        // 如果data.code
        if (data) {
            return Promise.resolve(data.data);
        }
        return response;
    },
    function (error) {
        //使用响应错误返回
        return Promise.reject(error);
    }
);
// 将service 导出
export default request;