axios的实例创建与应用

快来打我* 2023-10-11 15:16 3阅读 0赞

### 一、使用axios发送Ajax请求 ###

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.js"></script>

//使用axios发送一个简单的http请求
    			axios.get(url)
                    .then(response => {
        
                        //ajax请求执行成功，回调我们的成功方法
                        console.log(response)
                    })
                    .catch(error => {
        
                        alert("请求错误")
                    });

axios通过判断服务器返回的状态码判断是执行then还是catch，如果服务器返回的状态码为2xx，则表示成功，axios就会回调then方法，否则会回调catch。

### 二、使用axios实例发送Ajax请求 ###

在node环境中，通常会使用axios创建的实例来发送请求。如果后端服务有统一的网关入口，则只创建一个实例就好，但如果后端有多个不同域名的请求，我们还可以创建多个axios的实例

*  创建一个axios的实例

const service = axios.create({
        
            baseURL: '/', // api的base_url
            timeout: 12000 // request timeout
        })

通过axios的create方法，传入一个对象，返回了一个axios实例

*  通过实例发送请求  
    这个实例就是一个函数，直接调用这个函数，传入url，method，data等参数就可以调用，函数返回值为一个Promise对象

//使用这个实例发送请求,返回一个promise对象
        var requestOne = service({
        
            url:"axios1",
            method:"get"
        })

![在这里插入图片描述][20210112145637468.png]

*  成功与失败的回调  
    既然返回的是一个Promise，那么就可以then和catch

//发送成功的回调
        requestOne.then(res=>{
        
            console.log("响应数据：" + res)
        })
        //httpstatus不等于2xx的时候调用catch方法
        requestOne.catch(err=>{
        
            console.log("请求错误",err)
        })

### 三、配置请求和响应拦截 ###

在ajax发送请求前，可能需要做一些操作，例如设置一些请求头信息，最常用的就是将jwt生成的token加入到请求头中。

*  配置请求拦截

//请求拦截
        service.interceptors.request.use(request=>{
        
            console.log("请求发出前",request)
            var token = sessionStorage.token;
            if (token != undefined){
        
                request.headers['Authorization'] = token
            }
            return request //最后要返回
        },error=>{
        
            console.log("请求拒绝发出")
            Promise.reject(error) //有错误，则调用catch方法
        })

*  配置响应拦截

service.interceptors.response.use(response=>{
        
            console.log("响应拦截器",response)
            return response.data //可直接给then方法传入响应体中的内容
        })

当服务端的响应状态码为2xx时才会执行响应拦截器，否则就直接执行catch方法。

在响应拦截器中 return response.data，取出了响应体中的数据，传给then成功的回调，或者也可以进一步判断以下响应体中的code是否是我们约定的值，如果不是，则直接抛出异常。

如：

service.interceptors.response.use(response=>{
        
            var data = response.data;
            console.log("data",data)
            //获取自定义的code
            if (data.code === 0){
         //自己的业务的成功状态码为0
                return data.data
            }else {
        
                alert(data.msg)
            }
        })

[20210112145637468.png]: https://img-blog.csdnimg.cn/20210112145637468.png