axios完结

github开发者平台

 https://docs.github.com/en

axios的安装与引入

    npm i axios --save
    import axios from "axios"

axios_api

基本的五种请求

   ## 1. get(查询)
        axios(config) //config中包含url
        例如：
        axios({
	            url:"https://api.github.com/repos/betterDamu/bj_181130/issues",
	            method:"get",
	            headers:{
	            //令牌携带在请求头中
	              Authorization:"token 27bbc0dff340629d3124be840773882fcce3dc92"
	            }
            })
     ****************************************************************************
        axios(url,config)//config中不包含url
        例如：
         axios("https://api.github.com/repos/betterDamu/bj_181130/issues",
         { 
            method:"get",
            headers:{
            //令牌携带在请求头中
              Authorization:"token 27bbc0dff340629d3124be840773882fcce3dc92"
            }
         })
     ****************************************************************************
        axios.get(url,config)//config中不包含url method
        例如：
         axios.get("https://api.github.com/repos/betterDamu/bj_181130/issues",
         { 
            headers:{
            //令牌携带在请求头中
              Authorization:"token 27bbc0dff340629d3124be840773882fcce3dc92"
            }
         })
   ## 2. post(新增)
        axios(config) //config中包含url
        例如：
        axios({
              url:"https://api.github.com/repos/betterDamu/bj_181130/issues",
              method:"post",
              data: {title: this.title, body:this.body},
              headers:{
                Authorization:"token 27bbc0dff340629d3124be840773882fcce3dc92 "
                }
            })
   ************************************************************************************
        axios(url,config)//config中不包含url
        例如：
        axios("https://api.github.com/repos/betterDamu/bj_181130/issues",
        	{
              method:"post",
              data: {title: this.title, body:this.body},
              headers:{
                Authorization:"token 27bbc0dff340629d3124be840773882fcce3dc92 "
               }
            })
   ***************************************************************************************
        axio.post(url,**data**,config)// config中不包含url method data
        例如：
        axios.post("https://api.github.com/repos/betterDamu/bj_181130/issues",
                   {title: this.title, body:this.body},
          {
                headers:{
                Authorization:"token 27bbc0dff340629d3124be840773882fcce3dc92 "
                }
          })
   ## 3. put(全量修改)
        axios(config) //config中包含url
        axios(url,config)//config中不包含url
        axio.put(url,**data**,config)// config中不包含url method data
   ## 4. patch(局部修改)
        axios(config) //config中包含url
        axios(url,config)//config中不包含url
        axio.patch(url,**data**,config)// config中不包含url method data
   ## 5. delete(删除)
        axios(config) //config中包含url
        axios(url,config)//config中不包含url
        axios.delete(url,config)//config中不包含url method

补充：前端向后台传送数据可以通过 请求头，请求体，url ,cookie

并发请求

   Promise.all
    async mounted(){
          const promise1 = axios.get("https://api.github.com/repos/betterDamu/bj_181130/issues")
          const promise2 = axios.get("https://api.github.com/search/users?q=damu")
          const [a,b] = await Promise.all([promise1,promise2]);
          console.log(a,b);
   axios.all:
          const promise1 = axios.get("https://api.github.com/repos/betterDamu/bj_181130/issues")
          const promise2 = axios.get("https://api.github.com/search/users?q=damu")
          //const arr =await axios.all([promise1,promise2])
          //console.log(arr);
          axios.all([promise1,promise2]).then(axios.spread((a,b)=>{
             console.log(a, b);
           }))
}

axios实例

import axios from "axios";
const github = axios.create({
  baseURL: 'https://api.github.com/repos/betterDamu/bj_181130',
  timeout:10000,
  headers:{
    Authorization:"token 27bbc0dff340629d3124be840773882fcce3dc92"
  }
})
export default github

将github请求实例挂到vue的显示原型上
Vue.prototype.$github=github

          //实例发送请求
          const promise1 = this.$github.get("/issues")
          const promise2 = this.$github.get("https://api.github.com/search/users?q=damu")
          const [a,b] = await Promise.all([promise1,promise2]);
          console.log(a,b);

  import axios from "axios"
  const axiosins = axios.create(config) //将模块公共的配置定义在当前的config中
  axiosins(config)
  axiosins(url,config)
  axiosins.get(url,config)
  axiosins.delete(url,config)
  axiosins.post(url,data,config)
  axiosins.put(url,data,config)
  axiosins.patch(url,data,config)

axios请求配置

baseURL:请求的基地址
url : 请求地址
headers: 请求头
data: 请求体
params: query数据
method: 请求方法
timeout: 超时时间

axios响应结构

{
    data:接口返回的数据,
    status:响应状态
}

axios的配置项可以在几个地方指定?

越往下，配置优先级越高
1. axios.defaults.配置项 = 值  //全局配置   axios.defaults.baseURL = 'https://api.example.com';
2. const axiosins = axios.create({配置项:值}) //实例级别的配置
3. axiosins(config)  //请求级别的配置
4. 拦截器还可以改配置

拦截器

函数本身可以添加拦截器，实例也可以。这里是给实例添加：
// 添加请求拦截器
test.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  config.baseURL="https://testD.com"
  return config;
});

// 添加响应拦截器
test.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response.data;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});