1055人阅读
axios（1）
1、 利用npm安装npm install axios --save
2、 利用bower安装bower install axios --save
3、 直接利用cdn引入&script src=&/axios/dist/axios.min.js&&&/script&
1、 发送一个GET请求
axios.get('/user?ID=12345')
.then(function(response){
console.log(response);
.catch(function(err){
console.log(err);
axios.get('/user',{
.then(function(response){
console.log(response);
.catch(function(err){
console.log(err);
2、 发送一个POST请求
axios.post('/user',{
firstName:'Fred',
lastName:'Flintstone'
.then(function(res){
console.log(res);
.catch(function(err){
console.log(err);
3、 一次性并发多个请求
function getUserAccount(){
return axios.get('/user/12345');
function getUserPermissions(){
return axios.get('/user/12345/permissions');
axios.all([getUserAccount(),getUserPermissions()])
.then(axios.spread(function(acct,perms){
三、axios的API
（一） axios可以通过配置（config）来发送请求
1、&axios(config)
//发送一个`POST`请求
method:&POST&,
url:'/user/12345',
firstName:&Fred&,
lastName:&Flintstone&
2、&axios(url[,config])
('/user/12345');
（二）、 请求方式的别名，这里对所有已经支持的请求方式都提供了方便的别名
.request();
.get([,config]);
.delete([,config]);
.head([,config]);
.post([,data[,config]]);
.put([,data[,config]])
.patch([,data[,config]])
注意：当我们在使用别名方法的时候，url,method,data这几个参数不需要在配置中声明
（三）、 并发请求（concurrency）,即是帮助处理并发请求的辅助函数
axios.spread
（四）、创建一个axios实例，并且可以自定义其配置
1、&axios.create([config])
var instance = axios.create({
baseURL:&/api/&,
timeout:1000,
headers: {'X-Custom-Header':'foobar'}
2、 实例的方法
一下是实例方法，注意已经定义的配置将和利用create创建的实例的配置合并
#request(config)
#get(url[,config])
#delete(url[,config])
#head(url[,config])
#post(url[,data[,config]])
#put(url[,data[,config]])
#patch(url[,data[,config]])
四、请求的配置（request config）
以下就是请求的配置选项，只有url选项是必须的，如果method选项未定义，那么它默认是以GET的方式发出请求
url:'/user',
method:'get'
baseURL:'/api/',
transformRequest:[function(data){
transformResponse:[function(data){
headers: {'X-Requested-With':'XMLHttpRequest'},
paramsSerializer: function(params){
return Qs.stringify(params,{arrayFormat:'brackets'})
firstName:&Fred&
timeout:1000,
withCredentials:false,
adapter: function(config){
username:&zhangsan&,
password: &s00sdkf&
responseType:'json',
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName:'X-XSRF-TOKEN',
onUploadProgress:function(progressEvent){
onDownloadProgress:function(progressEvent){
maxContentLength:2000,
validateStatus:function(status){
return status &= 200 && status &300;
maxRedirects: 5,
httpAgent: new http.Agent({keeyAlive:true}),
httpsAgent: new https.Agent({keeyAlive:true}),
host:'127.0.0.1',
port: 9000,
username:'skda',
password:'radsd'
cancelToken: new cancelToken(function(cancel){
五、请求返回的内容
status:200,
statusText:'OK',
headers: {},
config: {}
你可以这样来获取响应信息
axios.get('/user/12345')
then(function(res){
console.log(res.data);
console.log(res.status);
console.log(res.statusText);
console.log(res.headers);
console.log(res.config);
六、默认配置
你可以设置默认配置，对所有请求都有效
1、 全局默认配置
axios.defaults.baseURL = '';
axios.mon['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['content-Type'] = 'appliction/x-www-form-urlencoded';
2、 自定义的实例默认设置
//当创建实例的时候配置默认配置
var instance = axios.create({
baseURL: ''
//当实例创建时候修改配置
instance.mon[&Authorization&] = AUTH_TOKEN;
3、 配置中的有优先级
config配置将会以优先级别来合并，顺序是lib/defauts.js中的默认配置，然后是实例中的默认配置，最后是请求中的config参数的配置，越往后等级越高，后面的会覆盖前面的例子。
//创建一个实例的时候会使用libray目录中的默认配置
//在这里timeout配置的值为0，来自于libray的默认值
var instance = axios.create();
//回覆盖掉library的默认值
//现在所有的请求都要等2.5S之后才会发出
instance.defaults.timeout = 2500;
//这里的timeout回覆盖之前的2.5S变成5s
instance.get('/longRequest',{
timeout: 5000
七、拦截器
你可以在请求、响应在到达then/catch之前拦截他们
axios.interceptors.request.use(function(config){
},function(err){
return Promise.reject(error);
axios.interceptors.response.use(function(res){
},function(err){
return Promise.reject(error);
2、取消拦截器
var myInterceptor = axios.interceptor.request.use(function(){});
axios.interceptors.request.eject(myInterceptor);
3、 给自定义的axios实例添加拦截器
var instance = axios.create();
instance.interceptors.request.use(function(){})
八、错误处理
axios.get('/user/12345')
.catch(function(error){
if(error.response){
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.header);
console.log('Error',error.message);
console.log(error.config);
你可以通过一个cancel token来取消一个请求
你可以通过CancelToken.source工厂函数来创建一个cancel
var CancelToken = axios.CancelT
var source = CancelToken.source();
axios.get('/user/12345',{
cancelToken: source.token
}).catch(function(thrown){
if(axios.isCancel(thrown)){
console.log('Request canceled',thrown.message);
source.cance(&操作被用户取消&);
你可以给cancelToken构造函数传递一个executor function来创建一个cancel token:
var cancelToken = axios.CancelT
axios.get('/user/12345',{
cancelToken: new CancelToken(function(c){
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：71791次
积分：1235
积分：1235
排名：千里之外
原创：64篇
(1)(4)(10)(11)(10)(4)(9)(17)(5)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'axios 正确打开方式
时间： 00:25:12
&&&& 阅读：55
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&一、安装1、 利用npm安装npm install axios --save2、 利用bower安装bower install axios --save3、 直接利用cdn引入&script src="/axios/dist/axios.min.js"&&/script&（vue框架的直接忽略）bind（this）很多人喜欢在外面定义一个that,里面用that来指向外部的this是一个道理。为了解决无法访问到 Vue 实例
.Catch错误处理
axios 并不能 use，只能每个需要发送请求的组件中即时引入为了解决这个问题，有两种开发思路，一是在引入 axios 之后，修改原型链，二是结合 Vuex，封装一个 aciton。import axios from ‘axios‘这时候如果在其它的组件中，是无法使用 axios 命令的。但如果将 axios 改写为 Vue 的原型属性，就能解决这个问题Vue.prototype.$ajax = axios
vue-resource不改变this指向；axios会改变
存下 var _this=/var that = this；
发送一个GET请求//通过给定的ID来发送请求axios.get(‘/user?ID=12345‘)
.then(function(response){
　　console.log(response);
.catch(function(err){
　　console.log(err);
});//以上请求也可以通过这种方式来发送axios.get(‘/user‘,{
　　params:{
　　　　ID:12345
　　}}).then(function(response){
　　console.log(response);}).catch(function(err){
　　console.log(err);});
发送一个POST请求
axios.post(‘/user‘,{
　　firstName:‘Fred‘,
　　lastName:‘Flintstone‘}).then(function(res){
　　console.log(res);}).catch(function(err){
　　console.log(err);});
3、一次性并发多个请求function getUserAccount(){
　　return axios.get(‘/user/12345‘);}function getUserPermissions(){
　　return axios.get(‘/user/12345/permissions‘);}axios.all([getUserAccount(),getUserPermissions()])
.then(axios.spread(function(acct,perms){
//当这两个请求都完成的时候会触发这个函数，两个参数分别代表返回的结果
}))标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码！Vue2.0的网络请求库 - Axios或者用到了bower（反正我没用过）bower install axios
然后导入什么的，对吧！require也行，import也行，作为初学者我们不拘谨太多，先学会。挑两个讲，第一个get方法，这样的axios.get('/* url */').then(response =& {
// Do Somethings
// console.log(response)
}).catch(error =& {
console.log(error)
因为可以使用Promise的API，那么毫无悬念它的运行肯定也是以Promise来运行。而且url，可以是带参数的，例如'/user?id=666'，或者也可以拆分开来axios.get('/user', {
id: ColMugX
}).then(res =& console.log(res)).catch(err =& console.log(err))
然后是post方法，这样的axios.post('/* url */', {
/* Config */
// id: 666,
// name: ColMugX
}).then(res =& console.log(res))
其他的大概也跟GET相差无几。只不过关于'url'后面传入的Object，有可能是用不了的，也有可能是用的了的。因为其他人有类似情况发生。所以我一般都是按照‘axios API’的做法，怎么做下面有！因为大概用的多的就这两个…所以举例就差不多这样了，毕竟vue-resource有的基本都有。总结几个用到比较多的小方法1. axios是一个方法，你甚至可以整个config传进去文档有提到，关于axios API有一条实现方法：axios(config) //config: Object
这就意味着，我们可以直接创建一整套静态的config，然后请求的时候带进去就能实现了。比如/*
export default {
method: 'get',
url: 'localhost:6666',
headers: {
token: 'ftv1443qby6bdfa41t90sfvq89hg3h54u989m9imog79g4'
//这一看就知道是滚键盘的…
name: 'ColMugX'
import config from 'config'
import axios form 'axios'
axios(config)
配置和运行分离可以带来很多好处，比如baseUrl，header 等等一堆需要重复调用又可以不用重复写，甚至还可以把这些静态的东西直接静态常量掉。避免自己出错或者被更改。而且这么一来的话，甚至请求的话只需要改动url和method就行了。因为用的是对象的方法，那好办啊！干对象有什么难的！- 今天要用什么姿势！- 要不你在上面吧我趴着！好那就趴着！let conf = config
conf.method = 'put'
// 其他该怎么传怎么传
然后请求配置官方有一个，照着这个看一下大概也知道它支持传什么东西进去了。（默认就有baseURL的配置确实是很惊讶，而且文档写的很清楚，如果没有baseURL或者url已经绝对了的话直接走url）2. 换了个姿势也许会压到头！（并不是说上面趴着会压爆头什么的…只是顺着梗玩下来而已！）因为上面说了，axios是可以把整个config都传进去然后开展工作的，所以也就意味着headers和method也可以带在config对象里一起进去，那么可能会有个小问题如果你的headers是application/json的话，直接post是有问题的，因为编码的问题。如果你想保持这个header的话，官方建议是多加一个库叫qs。import qs from 'qs'
axios.post('foo', qs.stringify(config.data))
这也是上面说的，为什么有些人在使用POST的时候会遇到“明明跟着官方做却又不对”的情况。3. 实际上错误处理也不是非得catchaxios是一种Promise的形式，实际上.then()已经有两个返回值了，在axios的话axios(config).then(res =& console.log(res), err =& console.log(err))
也是没问题的。4. 请求完得到的response会得到这次请求的所有内容这就是真单纯给刚接触网络请求的人一个tips了。请求完之后会得到一个response没问题，然后response里面就存放着包括config ,data, headers, status, statusText等几个东西。你要的token之类的东西就在headers里，直接跟读取对象一样读出来就行了。config的话就是你传进去的那些参数，但不局限于你传进去的，他会合并包括默认的内容。但是你也可以读出来就是了。data就是这次请求到的数据体，里面就是本次请求到的内容。5. withCredentials在axios中这是个默认配置里面一个参数，这是一个“是否保存跨域请求凭证”的一个开关，因为众所周知跨域请求是取不到cookie的，这是一个安全策略。但是浏览器可以获取，浏览器可以使用。人类看不到也使用不到！不过道理还是道理，如果你不打开，跨域了不管toekn还是cookie在浏览器里也是一个子都取不到用不到。而且设置了withCredentials之后，axios是会保存所有来自远程域的cookie的，比如某些需要登录过后才能访问的内容，就可以直接调用访问了，只要你不清空。6. 所有请求方法都必须小写（很重要）这是一个很坑的地方，如果你是按对象来写的话，method必须是小写的get,post,delete,put。这个之前被坑过很惨，最后是去看了源码得以解决：源码并没有关于字符大小写转换的功能…而且必须小写才正常对应方法…最后，进行vue编程的编辑器，VSCode是真的好用。自从微软爸爸推出了"x.d.ts"这种东西，还要什么自行车！再顺便安利下我们公司！也不是什么广告！就是随口说一下！我才不会说什么“匠邦互联网：一家有态度的技术+设计公司，互联网项目产品从0到1，提供移动互联网一站式设计开发服务。 ”之类的内容。我就两个词！微出细节，专注为商勤工必出匠，匠邦精微商29收藏分享举报文章被以下专栏收录互联网项目从0到1的设计开发干货 | 匠邦互联网原创。推荐阅读{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[{&sourceColumn&:{&lastUpdated&:,&description&:&互联网项目从0到1的设计开发干货，所以文章由【匠邦互联网】原创。&,&permission&:&COLUMN_PUBLIC&,&memberId&:690641,&contributePermission&:&COLUMN_PUBLIC&,&translatedCommentPermission&:&all&,&canManage&:true,&intro&:&互联网项目从0到1的设计开发干货 | 匠邦互联网原创。&,&urlToken&:&jbangit&,&id&:28719,&imagePath&:&v2-43fb3baa17e7ecbed864f33c09d7719f.jpg&,&slug&:&jbangit&,&applyReason&:&0&,&name&:&匠邦互联网&,&title&:&匠邦互联网&,&url&:&https:\u002F\\u002Fjbangit&,&commentPermission&:&COLUMN_ALL_CAN_COMMENT&,&canPost&:true,&created&:,&state&:&COLUMN_NORMAL&,&followers&:107,&avatar&:{&id&:&v2-43fb3baa17e7ecbed864f33c09d7719f&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&activateAuthorRequested&:false,&following&:false,&imageUrl&:&https:\u002F\\u002Fv2-43fb3baa17e7ecbed864f33c09d7719f_l.jpg&,&articlesCount&:20},&state&:&accepted&,&targetPost&:{&titleImage&:&&,&lastUpdated&:,&imagePath&:&&,&permission&:&ARTICLE_PUBLIC&,&topics&:[,225],&summary&:&文章首发在我的博客里：\u003Ca href=\&http:\u002F\u002Fblog.co1mugx.tk\u002F\u002F07\u002Faxios\u002F\&\u003EVue2.0的网络请求 - Axios\u003C\u002Fa\u003E 面对某乎这个看似个个“月入百万”的大社区，貌似内容必须要高大上，扯一串别人还看不懂才叫技术。\u003Cb\u003E拒绝！\u003C\u002Fb\u003E像我这种就喜欢接地气的划水程序员就是想分享一点粗暴好理解的内容！这次分享的是vue2.0钦点的网络…&,&copyPermission&:&ARTICLE_COPYABLE&,&translatedCommentPermission&:&all&,&likes&:0,&origAuthorId&:0,&publishedTime&:&T23:06:11+08:00&,&sourceUrl&:&&,&urlToken&:,&id&:2700953,&withContent&:false,&slug&:,&bigTitleImage&:false,&title&:&Vue2.0的网络请求库 - Axios&,&url&:&\u002Fp\u002F&,&commentPermission&:&ARTICLE_ALL_CAN_COMMENT&,&snapshotUrl&:&&,&created&:,&comments&:0,&columnId&:0,&content&:&&,&parentId&:0,&state&:&ARTICLE_PUBLISHED&,&imageUrl&:&&,&author&:{&bio&:&不好意思，我乐观&,&isFollowing&:false,&hash&:&7826c8ffcbc6b9d12f4ef&,&uid&:292700,&isOrg&:false,&slug&:&colmugx&,&isFollowed&:false,&description&:&http:\u002F\u002Fblog.co1mugx.tk\nhttps:\u002F\\u002FColMugX\n不待见除了中国粉之外任何一种脑残粉\n奉劝所有圣母婊，有种自己上\n我又能说话了！&,&name&:&ColMugX&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fcolmugx&,&avatar&:{&id&:&v2-46ae5b15a471e1086d69&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&memberId&:,&excerptTitle&:&&,&voteType&:&ARTICLE_VOTE_CLEAR&},&id&:611933}],&title&:&Vue2.0的网络请求库 - Axios&,&author&:&colmugx&,&content&:&\u003Cp\u003E文章首发在我的博客里：\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\u002Fblog.co1mugx.tk\u002F\u002F07\u002Faxios\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EVue2.0的网络请求 - Axios\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E \u003C\u002Fp\u003E\u003Cp\u003E面对某乎这个看似个个“月入百万”的大社区，貌似内容必须要高大上，扯一串别人还看不懂才叫技术。\u003Cb\u003E拒绝！\u003C\u002Fb\u003E像我这种就喜欢接地气的划水程序员就是想分享一点粗暴好理解的内容！\u003C\u002Fp\u003E\u003Cp\u003E这次分享的是vue2.0钦点的网络请求库——Axios。\u003C\u002Fp\u003E\u003Cp\u003E由于Vue2.0之后，vue想更专注于View层，所以网络部分就不再维护。改为使用尤老师钦点的axios。\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fmzabriskie\u002Faxios\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Emzabriskie\u002Faxios: Promise based HTTP client for the browser and node.js\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003E那反正不管！他说不合适我不用，我就去学个新的。其实接触过微信小程序的话，稍加理解，这就是一个比较厉害点但是又有局限的 \u003Cu\u003Ewx.request()\u003C\u002Fu\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E文章有提及到代码部分均使用ES6！都这年头了不用点ES6都不好意思了！\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Ch2\u003EWHAT S AXIOS\u003C\u002Fh2\u003E\u003Cp\u003E来自axios的介绍：\u003C\u002Fp\u003E\u003Cblockquote\u003EPromise based HTTP client for the browser and node.js\u003Cbr\u003E\u003C\u002Fblockquote\u003E\u003Cp\u003E就是一个基于ES6的Promise的网络请求库，其实说干净了就是一个打包好的XMLHttpRequests，也就是说，这个也是一个ajax库。\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E所以它一样可以实现：\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E在浏览器里建立XHR\u003C\u002Fli\u003E\u003Cli\u003E通过nodejs进行http请求\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E甚至可以实现！\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E转换或者拦截请求数据或响应数据\u003C\u002Fli\u003E\u003Cli\u003E支持Promise的API\u003C\u002Fli\u003E\u003Cli\u003E可以取消请求\u003C\u002Fli\u003E\u003Cli\u003E自动转换JSON\u003C\u002Fli\u003E\u003Cli\u003E\u003Cb\u003E可以防御XSRF攻击！\u003C\u002Fb\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E浏览器支持问题也没什么问题，IE这种本时代异端都能支持到8+，这问题是不大了。（VUE支持到9+！）\u003C\u002Fp\u003E\u003Ch2\u003EUSAGE\u003C\u002Fh2\u003E\u003Cp\u003E如果有用npm管理包的话，那么安装还是老规矩的\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-bash\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Enpm install axios\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E或者用到了bower（反正我没用过）\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-bash\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Ebower install axios\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E然后导入什么的，对吧！require也行，import也行，作为初学者我们不拘谨太多，先学会。\u003C\u002Fp\u003E\u003Cp\u003E挑两个讲，第一个get方法，这样的\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eaxios\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eget\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'\u002F* url *\u002F'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ethen\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eresponse\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=&\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c1\&\u003E\u002F\u002F Do Somethings\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c1\&\u003E\u002F\u002F console.log(response)\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}).\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Ecatch\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eerror\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=&\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Econsole\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Elog\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eerror\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E})\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E因为可以使用Promise的API，那么毫无悬念它的运行肯定也是以Promise来运行。\u003C\u002Fp\u003E\u003Cp\u003E而且url，可以是带参数的，例如'\u002Fuser?id=666'，或者也可以拆分开来\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eaxios\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eget\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'\u002Fuser'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Eparams\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Eid\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EColMugX\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ethen\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eres\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=&\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Econsole\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Elog\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eres\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)).\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Ecatch\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eerr\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=&\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Econsole\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Elog\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eerr\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E))\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E然后是post方法，这样的\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eaxios\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Epost\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'\u002F* url *\u002F'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&cm\&\u003E\u002F* Config *\u002F\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c1\&\u003E\u002F\u002F id: 666,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c1\&\u003E\u002F\u002F name: ColMugX\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ethen\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eres\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=&\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Econsole\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Elog\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eres\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E))\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E其他的大概也跟GET相差无几。只不过关于'url'后面传入的Object，有可能是用不了的，也有可能是用的了的。因为其他人有类似情况发生。所以我一般都是按照‘axios API’的做法，怎么做下面有！\u003C\u002Fp\u003E\u003Cp\u003E因为大概用的多的就这两个…所以举例就差不多这样了，毕竟vue-resource有的基本都有。\u003C\u002Fp\u003E\u003Ch2\u003E总结几个用到比较多的小方法\u003C\u002Fh2\u003E\u003Cp\u003E\u003Cb\u003E1. axios是一个方法，你甚至可以整个config传进去\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E文档有提到，关于axios API有一条实现方法：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eaxios\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Econfig\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\&c1\&\u003E\u002F\u002Fconfig: Object\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E这就意味着，我们可以直接创建一整套静态的config，然后请求的时候带进去就能实现了。比如\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&cm\&\u003E\u002F*\u003C\u002Fspan\u003E\n\u003Cspan class=\&cm\&\u003E *
config.js\u003C\u002Fspan\u003E\n\u003Cspan class=\&cm\&\u003E *\u002F\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&kr\&\u003Eexport\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Edefault\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Emethod\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E'get'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Eurl\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E'localhost:6666'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Eheaders\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Etoken\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E'ftv1443qby6bdfa41t90sfvq89hg3h54u989m9imog79g4'\u003C\u002Fspan\u003E \n
\u003Cspan class=\&c1\&\u003E\u002F\u002F这一看就知道是滚键盘的…\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E},\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Edata\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Eid\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E666\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Ename\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E'ColMugX'\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&cm\&\u003E\u002F*\u003C\u002Fspan\u003E\n\u003Cspan class=\&cm\&\u003E *
Axios.js\u003C\u002Fspan\u003E\n\u003Cspan class=\&cm\&\u003E *\u002F\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&kr\&\u003Eimport\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Econfig\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Efrom\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E'config'\u003C\u002Fspan\u003E\n\u003Cspan class=\&kr\&\u003Eimport\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Eaxios\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E'axios'\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&nx\&\u003Eaxios\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Econfig\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E配置和运行分离可以带来很多好处，\u003Cb\u003E比如baseUrl，header 等等一堆需要重复调用又可以不用重复写，甚至还可以把这些静态的东西直接静态常量掉。\u003C\u002Fb\u003E避免自己出错或者被更改。而且这么一来的话，甚至请求的话只需要改动url和method就行了。\u003C\u002Fp\u003E\u003Cp\u003E因为用的是对象的方法，那好办啊！干对象有什么难的！\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E- 今天要用什么姿势！\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E- 要不你在上面吧我趴着！\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E好那就趴着！\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&kd\&\u003Elet\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Econf\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Econfig\u003C\u002Fspan\u003E\n\u003Cspan class=\&nx\&\u003Econf\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Emethod\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E'put'\u003C\u002Fspan\u003E\n\u003Cspan class=\&c1\&\u003E\u002F\u002F 其他该怎么传怎么传\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E然后请求配置官方有一个\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fmzabriskie\u002Faxios%23request-config\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E默认配置方案\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E，照着这个看一下大概也知道它支持传什么东西进去了。\u003C\u002Fp\u003E\u003Cp\u003E（默认就有baseURL的配置确实是很惊讶，而且文档写的很清楚，如果没有baseURL或者url已经绝对了的话直接走url）\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E2. 换了个姿势也许会压到头！\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Ci\u003E（并不是说上面趴着会压爆头什么的…只是顺着梗玩下来而已！）\u003C\u002Fi\u003E\u003C\u002Fp\u003E\u003Cp\u003E因为上面说了，axios是可以把整个config都传进去然后开展工作的，所以也就意味着headers和method也可以带在config对象里一起进去，那么可能会有个小问题\u003C\u002Fp\u003E\u003Cp\u003E如果你的headers是\u003Cb\u003Eapplication\u002Fjson\u003C\u002Fb\u003E的话，直接post是有问题的，因为编码的问题。如果你想保持这个header的话，官方建议是多加一个库叫\u003Cb\u003Eqs。\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&kr\&\u003Eimport\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Eqs\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Efrom\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E'qs'\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&nx\&\u003Eaxios\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Epost\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'foo'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Eqs\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Estringify\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Econfig\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Edata\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E))\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E这也是上面说的，为什么有些人在使用POST的时候会遇到\u003Cb\u003E“明明跟着官方做却又不对”\u003C\u002Fb\u003E的情况。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E3. 实际上错误处理也不是非得catch\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003Eaxios是一种Promise的形式，实际上.then()已经有两个返回值了，在axios的话\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eaxios\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Econfig\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ethen\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eres\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=&\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Econsole\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Elog\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eres\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E),\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Eerr\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=&\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Econsole\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Elog\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eerr\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E))\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E也是没问题的。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E4. 请求完得到的response会得到这次请求的所有内容\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E这就是真单纯给刚接触网络请求的人一个tips了。请求完之后会得到一个response没问题，然后response里面就存放着包括config ,data, headers, status, statusText等几个东西。\u003C\u002Fp\u003E\u003Cp\u003E你要的token之类的东西就在headers里，直接跟读取对象一样读出来就行了。\u003C\u002Fp\u003E\u003Cp\u003Econfig的话就是你传进去的那些参数，但不局限于你传进去的，他会合并包括默认的内容。但是你也可以读出来就是了。\u003C\u002Fp\u003E\u003Cp\u003Edata就是这次请求到的数据体，里面就是本次请求到的内容。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E5. withCredentials\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E在axios中这是个默认配置里面一个参数，这是一个“\u003Cb\u003E是否保存跨域请求凭证\u003C\u002Fb\u003E”的一个开关，因为众所周知跨域请求是取不到cookie的，这是一个安全策略。但是浏览器可以获取，浏览器可以使用。\u003Cb\u003E人类看不到也使用不到！\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E不过道理还是道理，如果你不打开，跨域了不管toekn还是cookie在浏览器里也是一个子都取不到用不到。\u003C\u002Fp\u003E\u003Cp\u003E而且设置了withCredentials之后，axios是会保存所有来自远程域的cookie的，比如某些需要登录过后才能访问的内容，就可以直接调用访问了，只要你不清空。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E6. 所有请求方法都必须小写（很重要）\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E这是一个很坑的地方，如果你是按对象来写的话，method必须是小写的get,post,delete,put。\u003C\u002Fp\u003E\u003Cp\u003E这个之前被坑过很惨，最后是去看了源码得以解决：源码并没有关于字符大小写转换的功能…而且必须小写才正常对应方法…\u003C\u002Fp\u003E\u003Cp\u003E最后，进行vue编程的编辑器，VSCode是真的好用。自从微软爸爸推出了\&x.d.ts\&这种东西，还要什么自行车！\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-3f494d2aed9deab56a1beb_b.png\& data-caption=\&\& data-rawwidth=\&444\& data-rawheight=\&530\& class=\&origin_image zh-lightbox-thumb\& width=\&444\& data-original=\&https:\u002F\\u002Fv2-3f494d2aed9deab56a1beb_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='444'%20height='530'&&\u002Fsvg&\& data-caption=\&\& data-rawwidth=\&444\& data-rawheight=\&530\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&444\& data-original=\&https:\u002F\\u002Fv2-3f494d2aed9deab56a1beb_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-3f494d2aed9deab56a1beb_b.png\&\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-77f6c384e7e24d55bdd82ef_b.png\& data-caption=\&\& data-rawwidth=\&882\& data-rawheight=\&246\& class=\&origin_image zh-lightbox-thumb\& width=\&882\& data-original=\&https:\u002F\\u002Fv2-77f6c384e7e24d55bdd82ef_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='882'%20height='246'&&\u002Fsvg&\& data-caption=\&\& data-rawwidth=\&882\& data-rawheight=\&246\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&882\& data-original=\&https:\u002F\\u002Fv2-77f6c384e7e24d55bdd82ef_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-77f6c384e7e24d55bdd82ef_b.png\&\u003E\u003Cp\u003E\u003Cb\u003E再顺便安利下我们公司！也不是什么广告！就是随口说一下！\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E我才不会说什么“匠邦互联网：一家有态度的技术+设计公司，互联网项目产品从0到1，提供移动互联网一站式设计开发服务。 ”之类的内容。\u003C\u002Fp\u003E\u003Cp\u003E我就两个词！\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E微出细节，专注为商\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E勤工必出匠，匠邦精微商\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-dec14fcc5faa0ab2c6d36ca227c9393c_b.png\& data-caption=\&\& data-rawwidth=\&261\& data-rawheight=\&301\& class=\&content_image\& width=\&261\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='261'%20height='301'&&\u002Fsvg&\& data-caption=\&\& data-rawwidth=\&261\& data-rawheight=\&301\& class=\&content_image lazy\& width=\&261\& data-actualsrc=\&https:\u002F\\u002Fv2-dec14fcc5faa0ab2c6d36ca227c9393c_b.png\&\u003E\u003Cp\u003E\u003C\u002Fp\u003E&,&updated&:new Date(&T15:06:11.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:26,&collapsedCount&:0,&likeCount&:29,&state&:&published&,&isLiked&:false,&slug&:&&,&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&前端入门&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&Vue.js&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&前端开发&}],&adminClosedComment&:false,&titleImageSize&:{&width&:0,&height&:0},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&tipjarState&:&inactivated&,&annotationAction&:[],&sourceUrl&:&&,&pageCommentsCount&:26,&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T23:06:11+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[{&bio&:&求知若饥&,&isFollowing&:false,&hash&:&5f56b4b49f0fae70e7ffe&,&uid&:641700,&isOrg&:false,&slug&:&li-liang-chen-52&,&isFollowed&:false,&description&:&准前端工程师\nhttps:\\u002Flikaixuan&,&name&:&清流&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fli-liang-chen-52&,&avatar&:{&id&:&v2-e284a66ebd052dc178f1f&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&Kill Me or Heal Me&,&isFollowing&:false,&hash&:&b93db80e16&,&uid&:20,&isOrg&:false,&slug&:&an-ye-xing-lu-28&,&isFollowed&:false,&description&:&十年，能做很多事吧&,&name&:&暗夜行路&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fan-ye-xing-lu-28&,&avatar&:{&id&:&1fdbf5dd8&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&Йо - Йо
, йо&,&isFollowing&:false,&hash&:&effcb169eed382a159e8&,&uid&:92,&isOrg&:false,&slug&:&matrixbirds&,&isFollowed&:false,&description&:&Too Young, Too Simple, Always Naive. XD&,&name&:&Leannode&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fmatrixbirds&,&avatar&:{&id&:&aae3ee7a466f45bb341c7f6&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&代码探索者&,&isFollowing&:false,&hash&:&9d4cc751f3a4bc6fcfd180f&,&uid&:605200,&isOrg&:false,&slug&:&piao-hu-bu-ding-59-74&,&isFollowed&:false,&description&:&前端开发工程师一枚，入行没多久，请多多关照&,&name&:&飘忽不定&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fpiao-hu-bu-ding-59-74&,&avatar&:{&id&:&v2-8ceebfcc2e&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&&,&isFollowing&:false,&hash&:&bc648a73f155fc5369dc9dde6a8760bc&,&uid&:067300,&isOrg&:false,&slug&:&focus-29&,&isFollowed&:false,&description&:&&,&name&:&Focus&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Ffocus-29&,&avatar&:{&id&:&da8e974dc&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}],&summary&:&\u003Cimg src=\&http:\u002F\\u002Fv2-3f494d2aed9deab56a1beb_200x112.png\& data-caption=\&\& data-rawwidth=\&444\& data-rawheight=\&530\& class=\&origin_image inline-img zh-lightbox-thumb\& data-original=\&http:\u002F\\u002Fv2-3f494d2aed9deab56a1beb_r.png\&\u003E文章首发在我的博客里：\u003Ca href=\&http:\u002F\u002Fblog.co1mugx.tk\u002F\u002F07\u002Faxios\u002F\&\u003EVue2.0的网络请求 - Axios\u003C\u002Fa\u003E 面对某乎这个看似个个“月入百万”的大社区，貌似内容必须要高大上，扯一串别人还看不懂才叫技术。\u003Cb\u003E拒绝！\u003C\u002Fb\u003E像我这种就喜欢接地气的划水程序员就是想分享一点粗暴好理解的内容！这次分享的是vue2.0钦点的网络…&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:null},&annotationDetail&:null,&commentsCount&:26,&likesCount&:29,&FULLINFO&:true}},&User&:{&colmugx&:{&isFollowed&:false,&name&:&ColMugX&,&headline&:&http:\u002F\u002Fblog.co1mugx.tk\nhttps:\u002F\\u002FColMugX\n不待见除了中国粉之外任何一种脑残粉\n奉劝所有圣母婊，有种自己上\n我又能说话了！&,&avatarUrl&:&https:\u002F\\u002F50\u002Fv2-46ae5b15a471e1086d69_s.jpg&,&isFollowing&:false,&type&:&people&,&slug&:&colmugx&,&bio&:&不好意思，我乐观&,&hash&:&7826c8ffcbc6b9d12f4ef&,&uid&:292700,&isOrg&:false,&description&:&http:\u002F\u002Fblog.co1mugx.tk\nhttps:\u002F\\u002FColMugX\n不待见除了中国粉之外任何一种脑残粉\n奉劝所有圣母婊，有种自己上\n我又能说话了！&,&badge&:{&identity&:null,&bestAnswerer&:null},&profileUrl&:&https:\u002F\\u002Fpeople\u002Fcolmugx&,&avatar&:{&id&:&v2-46ae5b15a471e1086d69&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}},&Comment&:{},&favlists&:{}},&me&:{},&global&:{&experimentFeatures&:{&ge3&:&ge3_9&,&ge2&:&ge2_1&,&nwebStickySidebar&:&sticky&,&androidPassThroughPush&:&all&,&newMore&:&new&,&liveReviewBuyBar&:&live_review_buy_bar_2&,&liveStore&:&ls_a2_b2_c1_f2&,&searchHybridTabs&:&without-tabs&,&isOffice&:&false&,&homeUi2&:&default&,&answerRelatedReadings&:&qa_recommend_with_ads_and_article&,&remixOneKeyPlayButton&:&headerButton&,&asdfadsf&:&asdfad&,&qrcodeLogin&:&qrcode&,&newBuyBar&:&livenewbuy3&,&isShowUnicomFreeEntry&:&unicom_free_entry_off&,&newMobileColumnAppheader&:&new_header&,&zcmLighting&:&zcm&,&favAct&:&default&,&appStoreRateDialog&:&close&,&mobileQaPageProxyHeifetz&:&m_qa_page_nweb&,&iOSNewestVersion&:&4.2.0&,&default&:&None&,&wechatShareModal&:&wechat_share_modal_show&,&qaStickySidebar&:&sticky_sidebar&,&androidProfilePanel&:&panel_b&,&nwebWriteAnswer&:&default&}},&columns&:{&next&:{}},&columnPosts&:{},&columnSettings&:{&colomnAuthor&:[],&uploadAvatarDetails&:&&,&contributeRequests&:[],&contributeRequestsTotalCount&:0,&inviteAuthor&:&&},&postComments&:{},&postReviewComments&:{&comments&:[],&newComments&:[],&hasMore&:true},&favlistsByUser&:{},&favlistRelations&:{},&promotions&:{},&draft&:{&titleImage&:&&,&titleImageSize&:{},&isTitleImageFullScreen&:false,&canTitleImageFullScreen&:false,&title&:&&,&titleImageUploading&:false,&error&:&&,&content&:&&,&draftLoading&:false,&globalLoading&:false,&pendingVideo&:{&resource&:null,&error&:null}},&drafts&:{&draftsList&:[],&next&:{}},&config&:{&userNotBindPhoneTipString&:{}},&recommendPosts&:{&articleRecommendations&:[],&columnRecommendations&:[]},&env&:{&edition&:{},&isAppView&:false,&appViewConfig&:{&content_padding_top&:128,&content_padding_bottom&:56,&content_padding_left&:16,&content_padding_right&:16,&title_font_size&:22,&body_font_size&:16,&is_dark_theme&:false,&can_auto_load_image&:true,&app_info&:&OS=iOS&},&isApp&:false},&message&:{&newCount&:0},&pushNotification&:{&newCount&:0}}