axios的基本使用

axios定义：

axios 前端 ajax请求工具
        1. 在浏览器与nodejs可以使用
        2. 可以拦截请求与相应
        3. 扩展与封装自定义方法
        4. 不依赖dom节点

安装

       npm i axios -S

 vue全局挂载

import  axios from ‘axios’

Vue.prototype.$http = 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"
})

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.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded"
post请求头的默认配置

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:"http://www.wtown.com/",
				// 允许改变
				changeOrigin:true,
				onProxyReq(proxyReq, req, res) {
					proxyReq.setHeader('Referer', 'http://www.wtown.com'); 
				},
				pathRewrite:{
					"/abcd":"/api/rms/v1"
				}
        }
    }
   }
} 

axios封装

 01 导入

import axios from ‘axios’
import qs from ‘qs’
import jsonp from ‘jsonp’

 02 创建实例

var request = axios.create({
// 默认配置
})

 03 拦截 请求与响应（做加载提示）

request.interceptors.request.use()
request.interceptors.response.use()

04 扩展方法

request.jsonp = function(){}

05 导出

export default request;

qs

qs.stringify({}) 把对象转换为url编码字符串
{name:"mumu",age=18}  name=mumu&age=18

qs.parse(str)把url编码转换对象
name=mumu&age=18  {name:"mumu",age=18}  

转义

 window.encodeURI("name=周")
 window.decodeURI("name=%E6%9B%BE")
 window.encodeURIComponent("name=/user") //转