axios软件包和参数
1 .开发环境vue typescript
2 .计算机系统窗口S10专业版
3 .在开发过程中，我们经常使用axios进行数据交换。 这里介绍了axios的封装和参与。
4-1:以下结构为：
4-2:request.js代码为以下：import axios from 'axios '
import qs from 'qs '
axios.defaults.timeout=2000000； //响应时间
axios.defaults.headers.post [ ' content-type ' ]=' application/x-www-form-urlencoded '； //配置请求标头
//axios.defaults.base URL=' http://192.168.137.20833603000/'； //设置接口地址
//POST参数序列化(附加请求断路器) ) ) )。
axios.interceptors.request.use ((config )={
//在发送请求之前做某事
//config.headers.accept=' appli action/JSON，text/plan '；
if(config.method==='post ' ) )。
config.data=QS.stringify (config.data )；
}
返回配置；
，() error )={
console.log (错误参数) )。
返回promise.reject (error；
)；
//axios.interceptors.response.use ((RES )={
//对响应数据做点什么
//if (！ res.data
//returnpromise.resolve(RES；
//}
//return res；
//，() error )={
//console.log(error )；
//console.log )“网络异常”
//returnpromise.reject(error；
//；
//返回状态判断(添加响应阻止程序)
axios.interceptors.response.use ((RES )={
//对应答数据做点什么
if (！ res.data.success ) {
返回promise.resolve (RES；
}
返回RES；
，() error )={
console.log (“网络异常”
返回promise.reject (error；
)；
//返回一个Promise (发送开机自检请求) () ) ) ) ) )。
exportfunctionfetchpost(URL，param ) {
返回新promise ((resolve，reject )={
axios.post(URL，param ) )。
. then (响应={
解决(响应；
，err={
reject(err；
() )
. catch((error )={
是reject(error )
() )
() )
}
//返回一个Promise (发送获取请求) )。
导出功能要素(URL，param ) {
返回新promise ((resolve，reject )={
axios.get(URL，{params:param} )。
. then (响应={
解决(响应)
，err={
是reject(err )
() )
. catch((error )={
是reject(error )
() )
() )
}
导出默认值{
fetchPost，
fetchGet，
}
注意：请求报头的放置，确定传播的方法和格式，以及请求报头的放置很重要
5.SheBei.ts代码如下：import {fetchPost，fetchGet} from '@/utils/request '
导出功能(功能) {
returnfetchpost('/feng '，feng )；
}
6.Home.vue请求代码为以下：mounted
let a:any={
' name':'111 '，
' pass':'000 '
}
feng(a ).then ) ) ) RES )={
控制台. log (RES；
() )
}
7 .效果如下：
在node.js中输入以下：
//可以看到从前端收到了参数！
9 .参数的传递取决于请求标头在request.ts中的放置！
10 .请求标头的安排如下：--种类
axios.defaults.headers.post [ ' content-type ' ]=' application/x-www-form-urlencoded '； //请求体的数据以通常的表单形式(键-值对)发送到后端
-第二个
axios.defaults.headers.post [ ' content-type ' ]=' application/JSON '； //请求主体的数据作为json字符串发送到后端
-第三个
axios.defaults.headers.post [ ' content-type ' ]=' multipart/form-data '； //将请求体的数据作为一个消息处理，用分隔符以单位区分标签。 您可以同时上传密钥/值对和文件
11.10使用第一类，传承效果如下：
12.10使用第二种，传承效果如下：
//:需要注意使用此方法并修改request.ts代码：
13.10使用第三种，传承效果如下：
14 .这次教程到此结束。 一起努力走向高峰吧。