axios的使用及说明

linab1122024-01-02 12:52

目录

1.说明

2.直接使用

3.封装使用

4.注意

1.说明

官网：Axios 实例 | Axios中文文档 | Axios中文网

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

在前端项目中通过axios进行发送请求，通过代理后调用后端接口，并接收返回，将返回信息显示在前端画面中。

axios返回的是一个promise。执行then方法，接收执行成功的结果，显示在画面中。执行catch 方法用于对执行异常进行处理，如弹出提示信息。执行finally方法用于进行清理工作，如关闭画面loading。

2.直接使用

①安装

复制代码 
npm install axios

②配置

在js或ts文件中创建请求的文件，用于设置请求的共同配置及请求拦截器和响应拦截器。

(1)导入axios

复制代码 
import axios from "axios";

(2)设置全局的axios的配置

通过axios的defaults进行配置。可以设置基础url，这样在api请求中只需要设置相对url；

可以配置共用的请求头，如token及其他的自定义的请求头。

也可以为某个请求配置独有的请求头属性。

复制代码 
//配置请求的基础url
axios.defaults.baseURL = 'https://api.example.com';
//配置共同的请求头，所有的请求头中都带有X-request
axios.defaults.headers.common['X-request'] = 'ajax';
//配置post请求头，只对post请求起作用，在post请求头中设置Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

(3)配置请求拦截器及响应拦截器

请求拦截器：

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

方法中接收两个函数。

第一个函数是在请求前进行一个配置，如可以在请求头中添加token，进行请求url前缀的配置，请求参数的映射配置，防止数据重复提交的配置。

第二个函数是请求发送失败时的处理。

响应拦截器：

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

方法中接收两个函数。

2xx 范围内的状态码都会触发第一个函数。response对象的结构如下，后端响应的数据存放在data中。还有就是响应的http状态信息，响应头信息，请求的配置信息及request请求信息

复制代码 
{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 是服务器响应头
  // 所有的 header 名称都是小写，而且可以使用方括号语法访问
  // 例如: `response.headers['content-type']`
  headers: {},

  // `config` 是 `axios` 请求的配置信息
  config: {},

  // `request` 是生成此响应的请求
  // 在node.js中它是最后一个ClientRequest实例 (in redirects)，
  // 在浏览器中则是 XMLHttpRequest 实例
  request: {}
}

首先需要从data中获取后端响应的信息，对状态码进行判断，成功时，直接返回data，失败时，进行信息提示。

超出 2xx 范围的状态码都会触发第二个函数。

示例：

在src/api下创建interceptor.ts文件，内容如下：

复制代码 
import axios from "axios";
import type { AxiosRequestConfig, AxiosResponse } from "axios";
import { Message, Modal } from "@arco-design/web-vue";
import { useUserStore } from "@/store";
import { getToken } from "@/utils/auth";

export interface HttpResponse<T = unknown> {
	status : number;
	msg : string;
	code : number;
	data : T;
}
//设置请求的基础url
if (import.meta.env.VITE_API_BASE_URL) {
	axios.defaults.baseURL = import.meta.env.VITE_API_BASE_URL;
}

/**
 * 请求拦截
 */
axios.interceptors.request.use(
	(config : AxiosRequestConfig) => {
		const token = getToken();
		if (token) {
			if (!config.headers) {
				config.headers = {};
			}
            //设置token及自定义请求头
			config.headers['token'] = token;
			config.headers['X-Requested-With'] = 'ajax';
		}
            // 设置请求前缀
		config.url = import.meta.env.VITE_APP_API_URL + config.url;
		return config;
	},
	(error) =>
		// do something
		Promise.reject(error)
);

/**
 * 响应拦截
 *  todo 根据后端代码重新定制拦截逻辑
 */
axios.interceptors.response.use((response : AxiosResponse<any>) => {
	const res = response.data;
	let resCode = res.resHdr?.resCode;
	let resMsg = res.resHdr?.resMsg || "请求未知异常";
    //判断后端借口的返回值，异常时进行报错
	if (resCode !== "0000") {
		Message.error({
			content: resMsg,
			duration: 5 * 1000
		});
		return Promise.reject(new Error(resMsg));
	}
    //返回后端接口的内容
	return res;
},
	(error) => {
		Message.error({
			content: error.msg || "请求未知异常",
			duration: 5 * 1000
		});
		return Promise.reject(error);
	}
);

(4)在main.js文件中导入

导入(3)中的axios配置文件

复制代码 
import { createApp } from "vue";
import ArcoVue from "@arco-design/web-vue";
import ArcoVueIcon from "@arco-design/web-vue/es/icon";
import globalComponents from "@/components";
import router from "./router";
import store from "./store";
import i18n from "./locale";
import directive from "./directive";
import App from "./App.vue";
// Styles are imported via arco-plugin. See config/plugin/arcoStyleImport.ts in
// the directory for details
// 样式通过 arco-plugin 插件导入。详见目录文件 config/plugin/arcoStyleImport.ts
// https://arco.design/docs/designlab/use-theme-package
import "@/assets/style/global.less";
//导如axios的配置
import "@/api/interceptor";

const app = createApp(App);
app.use(ArcoVue, {});
app.use(ArcoVueIcon);
app.use(router);
app.use(store);
app.use(i18n);
app.use(globalComponents);
app.use(directive);

app.mount("#app");

(5)在各个模块的api文件中导入后进行使用

复制代码 
import axios from "axios";
import {ResponseData,RequestData} from "@/types/request";
// 接口
// 修改及新增的form表单接口
export interface insertFormModel {
    bsNo: string;
    deptId: string;
    deptNm: string;
    bsProvinceId: string;
    bsProvince: string;
    bsCityId: string;
    bsCity: string;
    bsAddr: string;
    remark: string;
}
// 下拉选择器类型
export interface selectType{
    value:string;
    label:string;
}


// 后端请求
// 分页查询
export async function listPage(params: RequestData): Promise<any> {
    return axios.post<ResponseData>("/tianjiannongshi/breedingStation/mb1407", params);
}
// 插入及更新
export async function insert(params: RequestData): Promise<any> {
    return axios.post<ResponseData>("/tianjiannongshi/breedingStation/mb1401", params);
}

发送get请求示例

复制代码 
const axios = require('axios');

// 向给定ID的用户发起请求
axios.get('/user?ID=12345')
  .then(function (response) {
    // 处理成功情况
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误情况
    console.log(error);
  })
  .finally(function () {
    // 总是会执行
  });

// 上述请求也可以按以下方式完成（可选）
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // 总是会执行
  });  

// 支持async/await用法
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

3.封装使用

①安装

复制代码 
npm install axios

②配置

在js或ts文件中创建请求的文件，用于设置请求的共同配置及请求拦截器和响应拦截器。

(1)导入axios

复制代码 
import axios from "axios";

(2)设置全局的axios的配置(按照需要进行设置)

参照上面

(3)创建axios实例

复制代码 
const service = axios.create({
  baseURL: 'http://localhost:5173', // api的base URL
  timeout: 5000, // 设置请求超时时间
  responseType: 'json',
  withCredentials: true, // 是否允许带cookie这些
  headers: {
    'x-token': '777'
  },
});

可以在创建实例中设置基础url及请求超时时间，创建实例前设置的全局信息，在创建实例后可以进行修改，如下：

(4)创建请求拦截器及响应拦截器

在(3)中创建了axios的实例service。通过service创建拦截器。

复制代码 
// 添加请求拦截器
service.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    config.headers['Authorization'] = 'Bearer ' +'13123123123';
    console.log('请求信息：' + JSON.stringify(config))
    return config;
  }, function (error) {
    // 对请求错误做些什么
    console.log('请求失败信息'+ error)
    return Promise.reject(error);
  });

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

最后导出axios实例。

示例：

在src/api下创建interceptor.ts文件，内容如下：

复制代码 
import axios from 'axios';

// 全局 axios 默认值
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';
axios.defaults.baseURL = 'http://localhost:5173';
axios.defaults.timeout = 5000;
axios.defaults.headers.common['X-Custom-Header'] = '369852147';
axios.defaults.headers.post['X-ajax'] = 'ajax';
const service = axios.create({
  baseURL: 'http://localhost:5173', // api的base URL
  timeout: 5000, // 设置请求超时时间
  responseType: 'json',
  withCredentials: true, // 是否允许带cookie这些
  headers: {
    'x-token': '777'
  },
});

// 添加请求拦截器
service.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    config.headers['Authorization'] = 'Bearer ' +'13123123123';
    console.log('请求信息：' + JSON.stringify(config))
    return config;
  }, function (error) {
    // 对请求错误做些什么
    console.log('请求失败信息'+ error)
    return Promise.reject(error);
  });

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

  export default service;

(5)导入axios实例进行使用

复制代码 
import {defineStore} from 'pinia'
import {ref} from 'vue'
//导入axios实例
import request from '@/api/interceptor';
// import axios from 'axios';
export const useChannelStore = defineStore('channel',() =>{

    // 声明数据
    const list = ref([]);
    // 声明操作数据的方法

    const getList = async () =>{
        //使用axios实例发送请求
        const {data:{data}} = await request.post('/v1_0/channels');
        list.value = data.channels;
    }
    // 声明getters相关

    return {
        list,
        getList
    }

})

4.注意

①使用2中直接使用的方法，需要在main.js文件中导入axios的配置文件，在其他地方使用时依然导入axios进行使用。

②使用3中封装使用的方法，不需要再main.js中进行导入，在其他地方使用时导入创建的axio示例进行使用。

③创建自定义请求头中必须使用中划线，不能使用下划线，使用下划线需要在nginx中添加额外的配置让下划线生效，默认是忽略下滑线的。

相关推荐
wjs20248 分钟前
DOM CDATA
开发语言
Tingjct9 分钟前
【初阶数据结构-二叉树】
c语言·开发语言·数据结构·算法
2601_9498095914 分钟前
flutter_for_openharmony家庭相册app实战+我的Tab实现
java·javascript·flutter
Up九五小庞25 分钟前
开源埋点分析平台 ClkLog 本地部署 + Web JS 埋点测试实战--九五小庞
前端·javascript·开源
猷咪36 分钟前
C++基础
开发语言·c++
IT·小灰灰37 分钟前
30行PHP，利用硅基流动API，网页客服瞬间上线
开发语言·人工智能·aigc·php
快点好好学习吧39 分钟前
phpize 依赖 php-config 获取 PHP 信息的庖丁解牛
android·开发语言·php
秦老师Q39 分钟前
php入门教程(超详细，一篇就够了!!!)
开发语言·mysql·php·db
烟锁池塘柳040 分钟前
解决Google Scholar “We‘re sorry... but your computer or network may be sending automated queries.”的问题
开发语言
是誰萆微了承諾40 分钟前
php 对接deepseek
android·开发语言·php
热门推荐
01GitHub 镜像站点02Clawdbot 中文汉化版 接入微信、飞书032026美赛A题智能手机电池续航时间预测的连续时间数学模型04OpenCode 入门教程：介绍 · 安装 · 配置第三方 API (如 Claude)05OpenClaw部署与配置教程：在Mac mini上接入国产大模型与飞书062025 年大语言模型发展回顾：关键突破、意外转折与 2026 年展望07Linux下V2Ray安装配置指南08【Milvus】向量数据库pymilvus使用教程09Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services10UV安装并设置国内源