典型的网站案例,网站建设都包含哪些内容,手机网站建设 移商动力,哪里有建设银行1. axios的基本特性
axios 是一个基于Promise用于浏览器和node.js的HTTP客户端。
它具有以下特征#xff1a;
支持浏览器和node.js支持promiseAPI自动转换JSON数据能拦截请求和响应请求转换请求数据和响应数据#xff08;请求是可以加密#xff0c;在返回时也可进行解密
支持浏览器和node.js支持promiseAPI自动转换JSON数据能拦截请求和响应请求转换请求数据和响应数据请求是可以加密在返回时也可进行解密
2. axios的基本用法
//客户端请求
axios.get(http://localhost:3000/adata).then(ret {//data属性名称是固定的用于获取后台响应的数据console.log(ret.data)})
//服务器端响应
app.get(/adata, (req, res) {res.send(Hello axios!)
})服务器端响应的是ret对象data属性是我们需要的数据获取方法ret.data(对象.属性名)
3. axios的常用API
get查询数据post添加数据put修改数据delete删除数据
4. axios的参数传递
4.1 get传递参数
第一种方式 通过URL传递参数 1. 传统url地址 通过?传参//客户端请求
bodyscript typetext/javascript srcjs/axios.js/scriptscript typetext/javascript//axios get传统url地址请求传参axios.get(http://localhost:3000/axios?id123).then(function (ret) {console.log(ret.data)})/script
/body
//服务器响应
app.get(/axios, (req, res) {res.send(axios get 传递参数 req.query.id)
})2. 通过restful形式的url用params接收参数
//客户端请求
bodyscript typetext/javascript srcjs/axios.js/scriptscript typetext/javascript//axios getrestful形式的url请求传参axios.get(http://localhost:3000/axios/456).then(function(ret){console.log(ret.data)})/script
/body
//服务器响应
app.get(/axios/:id, (req, res) {res.send(axios get (Restful) 传递参数 req.params.id)
})第二种方式
通过params选项传递参数比较方便传递多个参数的 时候
//客户端请求
bodyscript typetext/javascript srcjs/axios.js/scriptscript typetext/javascript//axios get通过params选项传递参数axios.get(http://localhost:3000/axios, {params: {id: 789}}).then(function (ret) {console.log(ret.data)})/script
/body
//服务器响应
app.get(/axios, (req, res) {res.send(axios get 传递参数 req.query.id)
})4.2 delete传递参数
参数传递方式和get相似两种
通过url地址传参 传统url地址 通过传参restful形式的url用params接收参数通过params用query接收参数
4.3 post传递参数
第一种方式
通过选项传递参数默认传递的是json格式的数据 //客户端请求
bodyscript typetext/javascript srcjs/axios.js/scriptscript typetext/javascript//axios post传递参数axios.post(http://localhost:3000/axios, {uname: xuhui那束光,pwd: 123}).then(function (ret) {console.log(ret.data)})/script
/body
//服务器响应
app.post(/axios, (req, res) {res.send(axios post 传递参数 req.body.uname --- req.body.pwd)
})提交的数据格式是JSON形式需要服务器端提供JSON支持
//服务器端支持
app.use(bodyParser.json());第二种方式
通过URLsearchParams传递参数application/x-www-for,-urlencoded
//客户端请求
bodyscript typetext/javascript srcjs/axios.js/scriptscript typetext/javascript//axios post传递参数var params new URLSearchParams();params.append(uname, xuhui那束光);params.append(pwd, 5555);axios.post(http://localhost:3000/axios, params).then(function(ret){console.log(ret.data)})/script
/body
//服务器响应
app.post(/axios/:id, (req, res) {res.send(axios put 传递参数 req.params.id --- req.body.uname --- req.body.pwd)
})提交的数据格式为字符串形式
4.4 put传递参数
参数传递方式与post相似选项传参和URLsearchParams传参 //客户端请求
bodyscript typetext/javascript srcjs/axios.js/scriptscript typetext/javascript//axios put 请求传参axios.put(http://localhost:3000/axios/123, {uname: xuhui那束光,pwd: 123}).then(function (ret) {console.log(ret.data)})/script
/body
//服务器响应
app.put(/axios/:id, (req, res) {res.send(axios put 传递参数 req.params.id --- req.body.uname --- req.body.pwd)
})5.axios的响应结果 响应结果的主要属性 data实际响应回来的数据headers响应头信息status响应状态码statusText响应状态信息 axios.get(http://localhost:3000/axios).then(function (ret) {console.log(ret)
})data绝大多数场景返回来的是JSON形式的数据
//向服务器请求JSON接口
axios.get(http://localhost:3000/axios-json).then(function (ret) {console.log(ret.data.uname)
})
//服务器端准备一个JSON接口
app.get(/axios-json, (req, res) {res.json({uname: xuhui,age: 12});
})data是大对象ret里面的小对象 通过 对象.属性名(data.uname) 可以获取对应的值 6. axios的全局配置
在发送请求前可以做一些配置信息 axios.defaults.timeout 3000//响应超时时间axios.defaults.baseURL http://localhost:3000/app//默认地址axios.defaults.headers[ mytoken ] aqwerarwrqrwqr //设置请求头 1. 默认地址演示
// 配置请求的基准URL地址
axios.defaults.baseURL http://localhost:3000/;
//向服务器请求JSON接口
axios.get(axios-json).then(function (ret) {console.log(ret.data.uname)
})//服务器端准备一个JSON接口
app.get(/axios-json, (req, res) {res.json({uname: xuhui,age: 12});
})2. 设置请求头
// 配置请求的基准URL地址
axios.defaults.baseURL http://localhost:3000/;
// 配置请求头信息
axios.defaults.headers[mytoken] hello;
//向服务器请求JSON接口
axios.get(axios-json).then(function (ret) {console.log(ret.data.uname)
})//服务器端准备一个JSON接口
app.get(/axios-json, (req, res) {res.json({uname: xuhui,age: 12});
})对于跨域请求来说请求头是需要后台进行配置的
7. axios拦截器
1.请求拦截器
在请求发出之前设置一些信息
//axios请求拦截器
axios.interceptors.request.use(function(config) {console.log(config.url)config.headers.mytoken nihao;return config;
}, function(err){console.log(err)
})
//向服务器发起请求
axios.get(http://localhost:3000/adata).then(function(data){console.log(data)
})2.响应拦截器
在获取数据之前对数据做一些加工处理 //axios响应拦截器
axios.interceptors.response.use(function(res) {console.log(res)return res;
}, function(err){console.log(err)
})
//向服务器发起请求
axios.get(http://localhost:3000/adata).then(function (data) {console.log(data)
})25行拦截器打印的信息 res和 31行最终需要的数据 打印的信息是完全一样的。但是响应拦截器res中拿到的不是具体数据
在调用接口时只关心实际的数据不需要包装数据的对象可以在设置拦截器内容对接收到的数据进行处理加工
最后拿到的data是经过响应拦截器处理后的数据注文中部分内容来源于网络联系侵删
