Axios的基本介绍

小程序880 更新时间：2025-06-08 13:01:32

2023年8月1日发(作者：)

Axios的基本介绍⼀ Axios的概念

Axios是什么？Axios是⼀个基于promise的HTTP库，主要⽤于浏览器和。

Axios有哪些特性？1. ⽀持Promise API2. 拦截请求和响应请求3. 转换请求数据和响应数据（请求是可以加密，在返回时也可进⾏解密）4. 取消请求5. ⾃动转换JSON数据（⽆需⼿动操作）6. 客户端⽀持防御XSRF攻击

Axios常⽤的请求⽅法？1. get：获取数据2. post ：提交数据，表单提交或⽂件上传等。3. put ：更新数据（所有数据推送到后端）4. patch ：更新数据（只将修改的数据推送到后端）5. delete：删除数据

Axios的安装与引⽤：npm add axios // 安装axiosimport axios from "axios"; // 引⽤axios

Axios的请求⽅法demo：get：// 写法⼀("/v1/images/search", { params: { limit: 1, page: 10, order: "Desc", }, }) .then((res) => { (res);});

// 写法⼆axios({ method: "get", url: `/v1/images/search?limit=${1}&page=${10}&order=${"Desc"}`, }).then((res) => { (res);});

post：post的两种请求格式：form-data （常⽤于⽂件/图⽚上传）：content-type: multipart/form-data; boundary=----WebKitFormBoundaryK0A5EtRCDRaTJb7x boundary(后端解码内容)application/json 常⽤格式，如data：content-type: application/json; charset=utf-8// 请求⽅式⼀：application/json// 写法⼀let dataTest = { image_id: "asf2", sub_id: "my-user-1234", value: 1,};("/v1/votes", dataTest).then((res) => { (res);});

// 请求⽅式⼆：form-data// 写法⼆let formData = new FormData();("image_id", "asf2");("sub_id", "my-user-1234");("value", '1');axios({ method: "post", url: "/v1/votes", data: formData, // params 参数在请求体内}).then((res) => { (res);});

delete：let vote_id = '318737'(`/v1/votes/${vote_id}`).then(res=>{ (res)})

Axios并发⽅法：并发请求：同时进⾏多个请求，并统⼀处理返回值。// () 是⼀个数组，存放axios请求，数组顺序即请求数据// () 是多个请求(())完成后,对它的返回数据进⾏分割处理([ (`/v1/images/search?limit=${1}&page=${10}&order=${"Desc"}`), ('/api/breeds/image/random')

]).then( // 并发的then不能只写⼀个回调请求 ((catApi,dogApi)=>{ (catApi,dogApi) }))

Axios 实例：axios通过创建实例。let instance = ({ baseURL:'localhost:8080', timeout:1000})('/api/breeds/image/random').then(res=>{ (res)})

Axios 实例相关配置：baseURL：请求的基础地址，请求接⼝时会拼接在baseURL后⾯timeout：请求的超时时长(毫秒)，如果请求的数据量⽐较⼤，会堵塞后端内容，然后超时释放超时内容。url：请求的路径method：请求的⽅法，get,post,pull,patch,deleteheaders：请求头，存放token。params：请求参数拼接在url上data：请求参数拼接在请求体内let instance = ({ baseURL:'localhost:8080', timeout:1000, url:'', method:'get', headers:{ token:'' }, params:{}, data:{}})

Axios配置的三种⽅式：全局配置：ts实例配置：，如果不添加参数则默认使⽤全局配置请求配置：⽤于处理⼀些特殊接⼝，如数据量⽐较⼤，需要单独增加超时时长配置优先级：全局配置 < 实例配置 < 请求配置// 全局配置 L = 'localhost:8080't = 1000// 实例配置，如果不添加参数则默认使⽤全局配置let instance2 = ({})// 请求配置,⽤于处理⼀些特殊接⼝，如数据量⽐较⼤，要单独增加超时时长('/api/breeds/image/random',{ timeout:5000}).then(res=>{ (res)})

Axios请求多个域名接⼝： // Axios请求多个域名接⼝：let instance = ({ baseURL:'localhost:8080', timeout:1000,})let instance2 = ({ baseURL:'localhost:8081', timeout:3000,})// 请求不同的域名接⼝('/').then(()=>{})('/',{timeout:5000}).then(()=>{})

Axios拦截器：拦截器：在请求或响应被处理前拦截它们请求拦截器：在前端发起请求前处理响应拦截器：在后端响应请求后处理取消拦截器（不常⽤）// 请求拦截器：在前端发起请求前处理( (config) => { // 发送请求前做些什么，如判断是否有token return config; }, (Error) => { // 请求错误时返回 return (Error); });// 响应拦截器：在后端响应请求后处理( (res) => { // 请求成功后做些什么，如判断后端返回的code状态码 return res; }, (Error) => { // 响应错误做些什么 return (Error); });("/").then((res) => { (res);}); // then请求失败("/", { timeout: 5000 }).catch((Error) => { (Error);}); // catch请求失败// 取消拦截器（不常⽤）let interceptors = ((config) => { // 请求之前可以在headers中新增auth参数 s = { auth: true, }; return config;});// 取消headers中的(interceptors);

Axios拦截器demo：请求与响应拦截器的处理// 例⼀：登录（token）let instance3 = ({}); // 访问需要token的接⼝((config) => { = "登录返回的token"; return config;});let instance4 = ({}); // 访问不需要token的接⼝// 例⼆：请求中的loading提⽰let instancePhone = ({});((config) => { // $('#loading').show 加载中打开 return config;});((res) => { // $('#loading').hide 加载中关闭 return res;});

Axios取消请求// Axios取消请求// source()⽅法⽣成了⼀个取消请求的CancelToken、let source = ()('/',{ cancelToken:}).then(res=>{ (res)}).catch(err=>{ (err,)})// 取消请求，cancel中的参数会进⼊到catch中。cancel('参数可选')('cancel http')