axios使用笔记

标签： Axios 分类： Javascript 创建时间：2019-07-03 08:41:35 更新时间：2024-11-15 10:49:44

1.Axios修改默认的Content-Type

post传递数据后端无法获取。axios使用，有他便利的地方，也有不便利的地方，我首先遇到的第一个问题就是使用post传递的时候，默认的请求头header是”Content-Type: application/json;charset=UTF-8”，问题是后台不认啊。

就算我设置了 content-type=application/x-www-form-urlencoded 也不起作用（这似乎是个bug，一直没解决，讨论地址 ，大部分的解决方案好像是引入一个qs库，对参数进行格式化，这有点蛋疼了。 ）

错误请求代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.post('/api/company/'+userid+'/apply', {
    accuracyType: this.precision,
    manageNum: this.number,
    fromTime: this.startTime,
    toTime: this.endTime,
    belongArea: this.region,
    otherservice: this.increaseResult.join(','),
    usepurpose: this.purpose,
    licenses: this.certificateImg,
})
.then(function (response) {
    if(response&&response.code==200){
        dd.device.notification.toast({
            message: '申请提交成功',
            duration: 4
        })
    }
    $btn.classList.remove("disabled");
})
.catch(function (error) {
    dd.device.notification.toast({
        message: '申请提交失败',
        duration: 4
    })
    $btn.classList.remove("disabled");
});
}

最后解决方式是,在配置中添加了transformRequest函数，将data进行了拼接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.post('/api/company/'+userid+'/apply', {
    accuracyType: this.precision,
    manageNum: this.number,
    fromTime: new Date(),
    toTime: new Date(),
    belongArea: this.region,
    otherservice: this.increaseResult.join(','),
    usepurpose: this.purpose,
    licenses: this.certificateImg,
},{
    transformRequest: [function (data) {
        // Do whatever you want to transform the data
        let ret = ''
        for (let it in data) {
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
    }]
})
.then(function (response) {
    if(response&&response.code==200){
        dd.device.notification.toast({
            message: '申请提交成功',
            duration: 4
        })
    }
    $btn.classList.remove("disabled");
})
.catch(function (error) {
    dd.device.notification.toast({
        message: '申请提交失败',
        duration: 4
    })
    $btn.classList.remove("disabled");
});
}

使用qs函数库的解决方案：

1
2
3
4
5
6
7
import QueryString from "qs";
var data = Querystring.stringify({ 
    "grant_type": "password",
    "username": login,
    "password": password
});
axios.post(Urls.login, data);
参考文章：
1.qs.js - 更好的处理url参数
2.axios设置get请求Content-Type=’application/json;charset=UTF-8’无效
3.axios请求接口发起两次请求（OPTIONS 与POST/GET）
4.关于axios会发送两次请求，有个OPTIONS请求的问题
5.axios发送post请求，如何提交表单数据？
6.Using application/x-www-form-urlencoded format
7.Browser
8.axios用post提交的数据格式
9.axios post request to send form data

2.json字符串有一个奇怪的{“d”:null}

这倒是挺邪乎的，用打开新标签页的方式请求json数据的时候，一切都很好，但是用axios请求的时候，json解析时总是有错误，在返回的数据中莫名奇妙的多加了一个{“d”:null}。
正常的结尾：

不正常的结尾：

使用其他的jquery请求这个服务就没有问题，但是到了axios这里就不管事了，真是奇了怪了。按参考资料的意思，我可以修改后台，但是这不是解决办法啊。
问题出自这里，我自顾自的添加了,

1
2
3
4
5
6
7
8
9
axios({
    url: url,
    method: method,
    data: data,
    headers:{
        "Content-Type":"application/json"
    }
    //responseType: dataType
})

在请求的时候，请求头就变成了：

post请求应该是：

所以将自定义请求头去掉，然后结合上一步也就是第一个问题(post发送数据后端接收不到数据)，共同处理，就可以解决这个奇怪的{“d”:null}。

参考文章：
1.Having strange {“d”:null} in JSON response
2.jQuery AJAX appending to Json return data “d:null”

3.请求的data不起作用

data参数，只有在请求类型为post时才会起作用。

1
2
3
4
5
6
7
8
9
// `data` is the data to be sent as the request body
// Only applicable for request methods 'PUT', 'POST', 'DELETE , and 'PATCH'
// When no `transformRequest` is set, must be of one of the following types:
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - Browser only: FormData, File, Blob
// - Node only: Stream, Buffer
data: {
firstName: 'Fred'
},
参考文章：
1.axios 发 post 请求，后端接收不到参数的解决方案
2.axios

3.设置Content-Type不起作用

在开发的时候设置get请求头的Content-Type总是失效，后来发现原来是一般get请求不需要设置Content-Type, 所以axios内部会自动删除掉

参考文章：
1.axios 用application/x-www-form-urlencoded 传参格式不对
2.axios 修改Content-Type设置
3.axios 全局变量默认Content-Type 无效问题
4.axios get请求设置请求头Content-Type不生效，失败 (这篇文章说get请求设置content-type不生效)

4.取消ajax请求

参考文章:
1.axios CancelToken 取消频繁发送请求的用法和源码解析
2.Axios取消请求CancelToken
3.github的axios内容 (这里其实也提到了如何创建一个可以取消的ajax请求)
**本文已结束，感谢您的观看**
鼓励一下

往期推荐

文章目录
  1. 1. 1.Axios修改默认的Content-Type
  2. 2. 2.json字符串有一个奇怪的{“d”:null}
  3. 3. 3.请求的data不起作用
  4. 4. 3.设置Content-Type不起作用
  5. 5. 4.取消ajax请求
小额赞助
本人提供免费与付费咨询服务，感谢您的支持！赞助请发邮件通知，方便公布您的善意！
**光 3.01 元
Sun 3.00 元
bibichuan 3.00 元
捐赠者名单 合计：9.01 元
微信公众号
广告位
诚心邀请广大金主爸爸洽谈合作
每日一省
isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

2021-04-07 链接地址
每日二省
为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

2021-04-07 链接地址
每日三省
== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

2021-04-07 链接地址
每日英语
Happiness is time precipitation, smile is the lonely sad.
幸福是年华的沉淀，微笑是寂寞的悲伤。
2016 ——— 美文