axios定义：
axios 前端 ajax请求工具
-
在浏览器与nodejs可以使用
-
可以拦截请求与相应
-
扩展与封装自定义方法
-
不依赖dom节点
安装
npm i axios -S
先在vue全局中挂载
import axios from 'axios'
Vue.prototype.$http = axios;
使用axios进行 get请求
axios.get(url)
axios.get(url?name=zh&age=18)
axios.get(url,{params:{name:"zh",age:18}})
axios({
url,
params:{},
method:"GET"
})
使用axios进行post请求
axios.post(
url,
data, //name=mumu&age=18
{headers:{"content-type":"application/x-www-form-urlencoded"}})
axios.post(
url,
data,//`{"name":"mumu","age":18}`,
{headers:{"Content-Type": "application/json; charset=UTF-8"}},
)
axios({
url,
method:"POST",
data:`name=mumu&age=18`,
headers:{"content-type":"application/x-www-form-urlencoded"}}
})
axios的默认配置
post请求头的默认配置：
axios.defaults.headers.post"Content-Type" = "请求头"
默认请求域名配置：
axios.defaults.baseURl="/"
请求超时配置：
axios.defaults.timeout = 3000
响应拦截
拦截
请求拦截
axios.interceptors.request.use(
function(config){return config},
function(err){Promise.reject(err)})
axios.interceptors.response.use(
function(res){return res},
function(err){Promise.reject(err)})
注意：
vue.config.js 放在项目的根目录 不是src目录
对vue脚手架进行配置
devServer 对内置脚手架服务器配置
我们主要用来代理
module.exports ={
devServer:{
open:true,//打开浏览器
proxy:{
"/abcd":{ //当请求地址包含/abcd 开始执行代理
target:"url",
// 允许改变
changeOrigin:true,
onProxyReq(proxyReq, req, res) {
proxyReq.setHeader('Referer', 'url');
},
pathRewrite:{
"/abcd":"/api/rms/v1"
}
}
}
}
}
axios封装
axios01 页面导入:
import axios from 'axios'
import qs from 'qs'
import jsonp from 'jsonp'
axios02 创建实例:
var request = axios.create({
// 默认配置
})
axios03 拦截 请求与响应（做加载提示）:
request.interceptors.request.use()
request.interceptors.response.use()
axios04 扩展方法：
request.jsonp = function(){}
axios05 导出：
export default request;
关于qs一些方法：
qs.stringify({}) 把对象转换为url编码字符串
{name:"fs",age=18} name=fs&age=18
qs.parse(str)把url编码转换对象
name=fs&age=18 {name:"fs",age=18}
了解转义：
window.encodeURI("name=王")
window.decodeURI("name=%E6%9B%BE")
window.encodeURIComponent("name=/user") //转
encodeURI 和 decodeURI 函数操作的是完整的 URI；这俩函数假定 URI 中的任何保留字符都有特殊意义，所有不会编码它们。
encodeURIComponent 和 decodeURIComponent 函数操作的是组成 URI 的个别组件；这俩函数假定任何保留字符都代表普通文本，所以必须编码它们，所以它们（保留字符）出现在一个完整 URI 的组件里面时不会被解释成保留字符了。