AXIOS

 Axios数据交互

NPM方式安装：

npm install axios

在使用页面引入：

import axios from 'axios‘

在main.js全局引用：

import axios from 'axios'

Vue.prototype.axios=axios

 Axios请求方法及别名

     Axios请求方法主要有以下几个：

1. Get: 获取数据

2. Post: 提交数据（表单提交、文件上传等）

3. Put ：更新数据（所有数据推送到后端）

4. Patch ：更新数据（只将修改的数据推动到后端）

5. Delete ：删除数据

●

请求方法都是由后端定义的

 

Axios 执行get请求

 

 axios.get(url地址，

{params:{

          参数1: 值1,

          参数2: 值2}

   })

  .then(function (response) {

    console.log(response);

  })

  .catch(function (error) {

    console.log(error);

  });

axios({

method:“get",

url:url地址,

params:{

           参数1: 值1,

           参数2: 值2

       }

})

.then(function (response) {

    console.log(response);

  })

 .catch(function (error) {

    console.log(error);

  });

Axios 执行post请求

 axios.post(url地址，{

          参数1: 值1,

          参数2: 值2}

   )

  .then(function (response) {

    console.log(response);

  })

  .catch(function (error) {

    console.log(error);

  });

axios({

method:“post",

url:url地址,

data:{

           参数1: 值1,

           参数2: 值2

       }

})

.then(function (response) {

    console.log(response);

  })

 .catch(function (error) {

    console.log(error);

  });

Axios 执行多个并发请求

• 在某些应用场景并不是单一调用一个接口就可以了，可能更多的是同时向后台发起多个不同的请求，同时进行多个接口的请求就构成了并发。

axios.get(url1).then(res=>{

    console.log(“个人信息”，res)

})

axios.get(url2).then(res=>{

    console.log(“好友列表”，res)

})

axios.get(url3).then(res=>{

    console.log(“战绩情况”，res)

})

• 在某些应用场景并不是单一调用一个接口就可以了，可能更多的是同时向后台发起多个不同的请求，同时进行多个接口的请求就构成了并发。

axios.all([

axios.get(url1),

axios.get(url2),

axios.get(url3)

]).then(

axios.spread((res1, res2, res3)=>{

console.log(“个人信息”，res1);

console.log(“好友列表”，res2);

console.log(“战绩情况”，res3);

}))

 

创建Axios实例

let instance1=axios.create({

baseURL：’http://127.0.0.1:8080’

timeout：1000

})

let instance2=axios.create({

baseURL：’http://127.0.0.1:9090’

timeout：5000

})

instance1.get(“接口地址1”).then(res=>{

  console.log(res)

})

instance2.get(“接口地址2”).then(res=>{

  console.log(res)

})

Axios实例参数

let instance=axios.create({

baseURL：域名                //基本接口地址

timeout：10000                  //请求超时限制

method:“post/get/put/patch/delete”//请求方式

url:url地址,                        //请求地址

headrs:[token:“身份令牌”],     //请求头中的信息，如身份令牌

data:{},   //在请求体中的参数

params:{},//请求参数，跟在url后面的参数

})

 拦截器

   在请求和响应被处理前拦截接口，即在发起请求之前做一些处理，在响应后做一些处理。从处理时间上来讲，拦截器分为请求拦截器和响应拦截器。

请求拦截器：

axios.interceptors.request.use(config=>{

          //发送请求前做处理

          return config

     },err=>{

          //在请求错误时处理

  return Promise.reject(err)

});

拦截器\

 

响应拦截器：

axios.interceptors.response.use(res=>{

          //请求成功后对响应数据进行处理

          return res

     },err=>{

          //响应数据出错后做处理

return Promise.reject(err)

});

      结合创建实例和拦截器可对axios进行封装，形成工具文件，在进行服务器请求时，只需传入url地址和参数接口。

import axios from 'axios'

import router from '../router'

export default function request(config) {

    //创建实例

    const req = axios.create({

        baseURL: "http://127.0.0.1:8088",

        timeout: 50000

    })

//请求拦截器

//响应拦截器

…….

 return req(config)

}

   // 请求拦截器：将所有的网络请求头都带上本地存储的 Token

    req.interceptors.request.use(config => {

        const token = sessionStorage.getItem('Authorization')

        token && (config.headers.authorization = token)

        return config

    })

 /**

     *如果返回code为209时, 则说明 登录超时，需重新登录

     * 否则清除本地 Token, 并跳转到 login 界面 */

    req.interceptors.response.use(response => {

        if (response.data.code == "209") {

            sessionStorage.removeItem("Authorization");

            sessionStorage.removeItem("username");

            console.log("登录已超时，请重新登录");

            router.push("/").catch(err => {

                console.log(err);

            });

        } else {

            return response.data

        }

    })