本文将通过具体实例介绍axios的基本使用方法与个性化配置（封装）。
直接开整！！！
1、新建一个Vue项目
2、安装axios
npm install axios
3、全局使用
//main.js
import axios from ‘axios’
Vue.prototype.$axios = axios
4、基本使用案例
执行get请求
// 为给定 ID 的 user 创建请求
axios.get(‘/user?ID=12345’).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
// 上面的请求也可以这样做
axios.get(‘/user’, {
params: {
ID: 12345
}
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
执行post请求
axios.post(‘/user’, {
firstname: ‘Fred’,
lastName: ‘Flintstone’
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
执行多个并发请求
function getUserAccount () {
return axios.get(‘/user/12345’);
}
function getUserPermissions () {
return axios.get(‘/user/12345/permissions’);
}
axios.all([getUserAccount(), getUserPermission()])
.then(axios.spread(function (acct, perms) {
// 两个请求都执行完成
}));
以上为基本使用，现在通过实例中实践一下
假如现在有某个接口（API），我们需要通过get请求调用，然后将返回数据渲染在页面上
api：https://api.apiopen.top/getJoke
入参：page=1、count=2、type=video
根据上面的基本使用案例可知，可以使用两种方式，接下来一一验证
1、URL地址参数拼接
由上面的api和入参可得拼接后的URL为：https://api.apiopen.top/getJoke?page=1&count=2&type=video（api后?将参数拼接，多个参数用&连接）
我是A组件
刷新页面，打开F12，切换到Network，发现此时页面发送了请求
切换到Console，查看控制台打印信息
我们已经成功获取接口的响应信息（返回值） ，数据结构为json格式，此时我们可以将想要的数据渲染到页面上，展开查看json数据
如我们想要将红色部分的信息渲染在页面上，此时可以对响应信息稍作处理
我是A组件
{{result}}
页面显示效果
2、传入params对象形式
另外一种get请求的写法，使用params对象，将所传参数当成params对象的键值对传入。以下可达到相同效果
this.$axios.get(‘https://api.apiopen.top/getJoke’,{
params:{ //将URL地址拼接参数的形式换成传入params对象的形式
page:1,
count:2,
type:‘video’
}
}).then(res=>{
//console.log(res,“响应信息”)
this.result = res.data.message //为data中的result赋值
})
这就是axios的基本使用，是不是很简单？
理解了get请求之后，post请求也就不难理解，除了请求方式（get变成了post）与请求参数的写法不同，其他写法基本一致。如下，如果此时为一个post请求，可以这么写
this.$axios.post(‘https://api.apiopen.top/getJoke’,
{ //请求体为一个对象
page:1,
count:2,
type:‘video’
}
).then(res=>{
//console.log(res,“响应信息”)
this.result = res.data.message //为data中的result赋值
})
除了如上两种方式外还有其他的写法吗？那是当然，请继续往下看。
可以通过向axios传递相关配置来创建请求：
如get请求我们可以这么写
this.$axios({
method: ‘get’,
url: ‘https://api.apiopen.top/getJoke?page=1&count=2&type=video’,
}).then(res=>{
this.result = res.data.message
})
进而也可以这么写
this.$axios({
method: ‘get’,
url: ‘https://api.apiopen.top/getJoke’,
params:{
page:1,
count:2,
type:‘video’
}
}).then(res=>{
this.result = res.data.message
})
与之前写法不同的是，我们直接把请求相关配置通过对象传入axios，如get请求此时用method:"get"表示，直接传入的url也使用url:"xxx"表示等等，这些成为一个对象的属性，该对象即为配置对象，形如axios(config)。
传递配置对象post请求案例
// 发送 POST 请求
axios({
method: ‘post’,
url: ‘/user/12345’,
data: { //注意这里，get参数使用params，post参数使用data
firstName: ‘Fred’,
lastName: ‘Flintstone’
}
})
那么我们在通过这种方式使用axios时，可传递的配置（配置对象的属性）都有哪些呢？请往下阅读请求配置。
请求配置
这些是创建请求时可以用的配置选项。只有 url 是必需的，如果没有指定 method，请求将默认使用 get方法。
{
// url 是用于请求的服务器 URL
url: ‘/user’
// method 是创建请求时使用的方法
method: ‘get’, // default
// baseURL 将自动加在 url 前面，除非 url 是一个绝对 URL
// 它可以通过设置一个 baseURL 便于为 axios 实例的方法传递相对 URL
baseURL: ‘https://some-domain.com/api/’,
// transformRequest 允许在向服务器发送前，修改请求数据
// 只能用在 PUT、POST 和 PATCH 这几个请求方法
// 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
transformRequest: [function (data, headers) {
// 对 data 进行任意转换处理
return data;
}],
// transformResponse 在传递给 then/catch 前，允许修改响应数据
transformResponse: [function (data) {
// 对 data 进行任意转换处理
return data;
}],
// headers 是即将被发送的自定义请求头
headers: {‘X-Requested-With’: ‘XMLHttpRequest’},
// params 是即将与请求一起发送的 URL 参数
// 必须是一个无格式对象 (plain object) 或 URLSearchParams 对象
params: {
ID: 12345
},
// paramsSerializer 是一个负责 params 序列化的函数
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function (params) {
return QS.stringify(params, {arrayFormat: ‘brackets’})
},
// data 是作为请求主体被发送的数据
// 只适用于这些请求方法 PUT、POST 和 PATCH
// 在没有设置 transformRequest 时，必须是以下类型之一：
// - string，plain object，ArrayBuffer，ArrayBufferView，URLSearchParams
// - 浏览器专属：FormData，File，Blob
// - Node专属：Stream
data: {
firstName: ‘Fred’
},
// timeout 指定请求超时的毫秒数(0 表示无超时时间)
// 如果请求花费了超过 timeout 的时间，请求将被中断
timeout: 1000,
// withCredentials 表示跨域请求时是否需要使用凭证
withCredentials: false, // default
// adapter 允许自定义处理请求，以使测试更轻松
// 返回一个 promise 并应用一个有效的响应(查阅 response docs)
adapter: function (config) {
/* … */
},
// auth 表示应该使用 HTTP 基础验证，并提供凭据
// 这将设置一个 Authorization 头，覆写掉现有的任意使用 headers 设置的自定义 Authorization 头
auth: {
username: ‘janedoe’,
password: ‘s00pers3cret’
},
// responseType 表示服务器响应的数据类型，可以是 arraybuffer、blob、document、json、text、stream
responseType: ‘json’, // default
// responseEncoding 表示对响应的编码
// Note：对于 responseType 为 stream 或 客户端请求会忽略
responseEncoding: ‘utf-8’,
// xsrfCookieName 是用作 xsrf token 值的 cookie 名称
xsrfCookieName: ‘XSRF-TOKEN’, // default
// xsrfHeaderName 是 xsrf token 值的 http 头名称
xsrfHeaderName: ‘X-XSRF-TOKEN’, // default
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
总结
=============================================================
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。
个人将这段时间所学的知识，分为三个阶段：
第一阶段：HTML&CSS&JavaScript基础
第二阶段:移动端开发技术
第三阶段:前端常用框架
-
推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。
-
大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。
一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。
个人将这段时间所学的知识，分为三个阶段：
第一阶段：HTML&CSS&JavaScript基础
第二阶段:移动端开发技术
第三阶段:前端常用框架
-
推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。
-
大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。
一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-N9e1egpJ-1712771186412)]
860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
