axios讲解

一.安装

cd 项目 目录中  npm i axios -S

二.axios方法

axios({
 url 请求的地址
 method:"POST"|"GET"|"DELETE"|"PUT" 请求的方法
 data:请求的数据
 params：请求的参数（GET请求）
 headers请求头

})

三.Content -Type

1.请求数据的格式

2.application/json (post默认)

3.application/x-www-form-urlencoded（get默认）

四.post请求的数据格式 根据contentType会变化(具体采用什么样的content-type由后端接口文档决定)

1.数据 {name:"xxx",password:"xxx"}

2.application/json
    axios({
   url,
  method:"POST",
  data:{name:"zeng8",password:"zmm123"}
})

3.application/x-www-form-urlencoded
    axios({
   url,
  method:"POST",
  data:name=zeng8&password=zmm123
})

五.axios.post       post方法简写

    axios.post(url,data,config)
    url请求的地址
    data请求的数据（数据的格式根据Content-Type）
    config配置 里面包含headers请求头

六.axios.get     get方法简写

    axios.get(url,config)
    url请求的地址
config 请求的配置
    axios.get(url,{
    params:this.params
    headers:{"Authorization":"Bearer "+localStorage.getItem("toekn")}
})
    axios.get("url?size=10&current=1",{
   headers:{....}
})
    get请求默认的Content-Type就是 application/x-www-form-urlencoded默认可以省略

七.axios.delete     删除方法的简写

    axios.delete(url,config)
    url删除的地址
     config配置

八.axios.put     更新方法的简写

    axios.put(url,data,config)
    url请求的地址
    data请求的数据
    config请求配置

九.axios的封装          request.js

1.  导入

import axios from “axios”

2. 创建实例

const request = axios.create({
   baseURL:"",
   timeout:3000
})

3.拦截请求

3.1拦截请求头

3.1.1添加加载提示
添加请求头token

3.1.2

request.interceptors.request.use(function(config){
     config.headers.Authorization="Bearer "+token
    return  config;
})

3.2拦截响应结果

3.2.1

集中处理常见错误
对数据格式操作

3.2.2

request.interceptors.response.use(
   function(res){return res},
   function(err){
     if(err.response.status===401){alert("没有权限")}
    return err;
    }
)

4.导出

export default request