axios的用法

Axios 支持所有常见的 HTTP 请求方法，如 GET、POST、PUT、DELETE 等。这使得开发者能够轻松地与 RESTful API 进行交互。也是vue中用来访问接口的方式，但是我们究竟如何用呢？

在vue中，我们要先下载axios，这里使用npm安装

npm install axios

 我们以封装一个方法来示范

我们在vue项目中创建一个request.js文件

在该文件中创建一个实例然后导出，方便在项目中的任何一个文件中使用

我们书写的格式：

import axios from 'axios'
//这里一定要引入axios，因为不引入那么无法使用，程序不能凭空使用任何东西这是最基本的认知
const 实例名 = axios.create({
   baseURL:'http://ip地址:端口号',
   //这是访问哪个地址的意思，电脑无法像我们人一样清晰认知，要给他足够的信息才知道去访问哪里
   timeout: 访问的时间设定
   //此配置作用是防止请求时间过长
})

//请求拦截器
实例名称.interceptors.request.use(function (config) {
    // 在发送请求之前做什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

    
//添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });
export default 实例名;

 创建的示范：

import axios from 'axios'
import { ElMessage } from 'element-plus'

const instance = axios.create({
    baseURL: 'http://xxxxxx/',
    timeout: 5000,

});
// 自定义请求拦截器  

// 添加请求拦截器
instance.interceptors.request.use(function(config) {
    // // 在发送请求之前做些什么
    return config;
}, function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function(response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    if (response.data.code === 501) {
        ElMessage.error("身份认证失败")
        router.push('/merchantlogin')
        return Promise.reject(response.data)
    }

    return response.data;
}, function(error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    ElMessage.error(error.response.ElMessage || "服务异常")
    return Promise.reject(error);
});

export default instance;

 至此我们就创建完成，但是此时我们还只是创建一个实例，想要使用所访问的地址的各个接口还需要调用此实例，通过这个实例去调用各个接口

例如：

我在vue目录中新建了一个api文件夹，里面创建一个接口文件文件中代码如下

import request from 刚刚创建的实例路径
//request可以替换成其它名字,这就相当于用request来接受导入的实例

export const getPicCode = (input1) =>{
    return request.get('/api/email/send?email='+input1+'@qq.com')
}

//导出此方法，以便在其他文件中去调用此方法