axios定义:
axios 前端 ajax请求工具
        1. 在浏览器与nodejs可以使用
        2. 可以拦截请求与相应
        3. 扩展与封装自定义方法
        4. 不依赖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 的组件里面时不会被解释成保留字符了。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐