后端上手学习axios基础知识

前言

axios 可以通过支持发送http请求，可以方便的向后端请求数据，可以实现异步请求，取消请求，拦截器等配置

基础使用

安装axios

通过npm命令或者yarn命令可以安装依赖

csharp 复制代码

npm install axios / yarn add axios

基本用法

可以直接通过axios配置config来构建请求，发送get请求/post请求,通过调取get方法实现调用get请求，post方法则为post请求,通过then方法来接受异步请求的结果返回，通过catch来接收请求的错误返回

ini 复制代码

axios(config)

axios({
    method:"",
    headers:{},
    data:{},
    params:{}
}).then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

第一种：get请求第一个参数配置url地址，第二个参数配置config，可以配置参数params对象也就是get请求问号后的参数，可以配置请求头headers对象

php 复制代码

// axios.get(url,config)

axios.get("http://localhost:3000/get",
{
    params:{name:""},
    headers:{}
})

第二种：当post请求的时候,第一个参数配置url地址，第二个配置data数据内容,第三个参数配置config，可以配置参数params对象也就是get请求问号后的参数，可以配置请求头headers对象

php 复制代码

// axios.post(url,data,config)

axios.post("http://localhost:3000/post",
{
    name:"sss"
},
{
    params:{age:1},
    headers:{}
})

第三种：对于请求头是content-type 为 multipart/form-data的时候，构造参数有些许不同，需要借助 FormData 对象来实现

go 复制代码

const form = new FormData();
form.append('my_field', 'my value');
form.append('my_buffer', new Blob([1,2,3]));
form.append('my_file', fileInput.files[0]);

axios.post('https://example.com', form)

第四种：对于请求头content-type 是application/x-www-form-urlencoded，需要引用 qs或者 URLSearchParams 来实现，但因为 URLSearchParams存在并不一定都支持。

csharp 复制代码

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

响应和异常

对于then方法后面的response可以获取到的响应结果。

data：获取到请求结果的返回
headers ：获取到请求的请求头
config：获取到请求的配置信息
status：获取请求的状态码

vbscript 复制代码

response.data
response.headers

对于catch方法后面的error可以捕获到异常结果。

message : 返回的错误信息
response: 返回服务器的响应
config：获取到请求的配置信息

创建实例

如果需要为不同的 API 设置不同的基础配置，可以创建 Axios 实例

arduino 复制代码

const instance = axios.create({
  baseURL: 'https://api.example.com', // url地址
  timeout: 5000, // 超时时间
  headers: { 'Authorization': 'Bearer your_token_here' } // 请求头
});

然后可以通过instance在构建不同状态的请求函数方法

php 复制代码

instance(config)

instance({
    method:"",
    headers:{},
    data:{},
    params:{}
})

配置拦截器

注意：如果你需要对具体的实例来进行拦截配置，通过前面的 instance来配置

ini 复制代码

instance.interceptors.request.use(config => {},error => {})

请求拦截器

一般可以用来对请求头，主要是对发送请求前的一些初步的构建参数内容。

ini 复制代码

axios.interceptors.request.use(config => {
  // 在发送请求前添加 token
  config.headers.Authorization = 'Bearer your_token_here';
  return config;
}, error => {
  return Promise.reject(error);
});

响应拦截器

一般可以用来对响应数据进行的判断处理，可以对返回的结果错误结果统一的封装

ini 复制代码

axios.interceptors.response.use(response => {
  // 对响应数据进行处理
  return response;
}, error => {
  // 统一处理错误
  if (error.response.status === 401) {
    console.error('未授权，请重新登录');
  }
  return Promise.reject(error);
});`

项目使用

在我们封装请求来实现时，一般会通过Promise 再包裹一层。而且一般会创建实例，来封装对应的请求前缀和赋值token等信息，也有对返回的响应做通用结果的处理，就会用到对应的拦截器。