vue-axios封装请求（十二）

# 一、axios 简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF

# 二、axios基础

axios.request（config）
axios.get（url [，config]）
axios.delete（url [，config]）
axios.head（url [，config]）
axios.options（url [，config]）
axios.post（url [，data [，config]]）
axios.put（url [，data [，config]]）
axios.patch（url [，data [，config]]）

# 三、执行 GET 请求

// 向具有指定ID的用户发出请求
axios.get('/user?ID=12345')
.then(function (res) {
    console.log(res);
})
.catch(function (error) {
    console.log(error);
});
 
// 也可以通过 params 对象传递参数
axios.get('/user', {
    params: {
        ID: 12345
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

@前端进阶之旅: 代码已经复制到剪贴板

# 四、执行 POST 请求

axios.post('/user', {
    userId:"123"
},{
    headers:{
        token:"abc"
    }
})
.then(function (res) {
    console.log(res);
})
.catch(function (error) {
    console.log(error);
});

@前端进阶之旅: 代码已经复制到剪贴板

# 五、通过配置方式发送请求

get请求是发送参数，在params中定义。而POST请求是发送request body,需要在data中定义

// get 在params中定义
axios({
    url:"pakage.json",
    method:"get",
    params:{
        userId:"123"
    },
    headers:{
        token:"http-test"
    }
}).then(res=>{
    console.log(res.data);
})

// post 在data中定义
axios({
    url:"pakage.json",
    method:"post",
    data:{
        userId:"123"
    },
    headers:{
        token:"http-test"
    }
}).then(res=>{
    console.log(res.data);
})

@前端进阶之旅: 代码已经复制到剪贴板

# 六、执行多个并发请求

function getUserAcount(){
    // 返回一个promise对象
    return axios.get("/user/1234");
}
function getUserPermissions(){
    // 返回一个promise对象
    return axios.get("/user/1234/getUserPermissions");
}

//一次性返回两个接口
axios.all([getUserAccount(),getUserPerssions()]).then(axios.spread((acct, perms) => {
    // spread展开两个返回的结果
    //两个请求现已完成
}))

@前端进阶之旅: 代码已经复制到剪贴板

# 七、全局拦截

new Vue({
    el:"app",
    data:{
        msg:""
    },
    // 初始化生命周期的一个函数
    mounted:function(){
     //拦截请求之前
       axios.interceptors.request.use(config=>{
           //这里做一些拦截操作,拦截用户的请求 请求之前做一些loading处理
           return config;
       })
       //拦截响应之后处理
       axios.interceptors.response.use(response=>{
           //这里做一些拦截操作,响应以后做什么，在返回数据
           return response;
       })
    },

    methods: {
        get: function() {
        
        },
        post:function() {
           
        }
    }
})

@前端进阶之旅: 代码已经复制到剪贴板

# 八、请求封装、异常统一处理

vue中采用axios处理网络请求，避免请求接口重复代码，以及各种网络情况造成的异常情况的判断，采用axios请求封装和异常拦截操作

# 8.1 axios 请求封装

//  引入axios文件包
import axios from 'axios'

// POST 方法封装  (参数处理)
export const postRequest = (url, params) => {
  return axios({
    method: 'post',
    url: url,
    data: params,
    transformRequest: [function (data) {
      let ret = ''
      for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });
}

// POST 方法封装  (文件上传)
export const uploadFileRequest = (url, params) => {
  return axios({
    method: 'post',
    url: url,
    data: params,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });
}

//  GET 方法封装
export const getRequest = (url) => {
  return axios({
    method: 'get',
    url: url
  });
}

//  PUT 方法封装
export const putRequest = (url, params) => {
  return axios({
    method: 'put',
    url: url,
    data: params,
    transformRequest: [function (data) {
      let ret = ''
      for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });
}

//  DELETE 方法封装
export const deleteRequest = (url) => {
  return axios({
    method: 'delete',
    url: url
  });
}

@前端进阶之旅: 代码已经复制到剪贴板

# 8.2 axios请求异常统一处理

请求出错的时候执行的是：Promise.resolve(err);，而不是Promise.reject(err);，这样无论请求成功还是失败，在成功的回调中都能收到通知

# 8.3 vue 项目中使用该方法

在main.js中导入所有请求方法

//  导入所有请求方法
import {getRequest,postRequest,deleteRequest,putRequest} from './utils/api'

@前端进阶之旅: 代码已经复制到剪贴板

将请求方法添加至 Vue.prototype 上

//  向VUE的原型上添加请求方法
Vue.prototype.getRequest = getRequest;
Vue.prototype.postRequest = postRequest;
Vue.prototype.deleteRequest = deleteRequest;
Vue.prototype.putRequest = putRequest;

@前端进阶之旅: 代码已经复制到剪贴板

发送请求（请求方法的调用）

//  发送网络请求
this.postRequest('/login', {userName，password}).then(resp=> {
        ...
    }
});

@前端进阶之旅: 代码已经复制到剪贴板

# 九、接口封装处理

vue中Axios的封装与API接口的管理详解

# 9.1 axios的封装

在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等

一般我会在项目的src目录中，新建一个request文件夹，然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口

// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，后面会提到
// vant的toast提示框组件，大家可根据自己的ui组件更改。
import { Toast } from 'vant';

@前端进阶之旅: 代码已经复制到剪贴板

# 9.2 环境的切换

我们的项目环境可能有开发环境、测试环境和生产环境。我们通过node的环境变量来匹配我们的默认的接口url前缀。axios.defaults.baseURL可以设置axios的默认请求地址就不多说了

// 环境的切换
if (process.env.NODE_ENV == 'development') { 
 axios.defaults.baseURL = 'https://www.baidu.com';} 
else if (process.env.NODE_ENV == 'debug') { 
 axios.defaults.baseURL = 'https://www.ceshi.com';
} 
else if (process.env.NODE_ENV == 'production') { 
 axios.defaults.baseURL = 'https://www.production.com';
}

@前端进阶之旅: 代码已经复制到剪贴板

# 9.3 设置请求超时

通过axios.defaults.timeout设置默认的请求超时时间。例如超过了10s，就会告知用户当前请求超时，请刷新等

axios.defaults.timeout = 10000;

@前端进阶之旅: 代码已经复制到剪贴板

post请求头的设置post请求的时候，我们需要加上一个请求头，所以可以在这里进行一个默认的设置，即设置post的请求头为application/x-www-form-urlencoded;charset=UTF-8

# 一、axios 简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF

# 二、axios基础

axios.request（config）
axios.get（url [，config]）
axios.delete（url [，config]）
axios.head（url [，config]）
axios.options（url [，config]）
axios.post（url [，data [，config]]）
axios.put（url [，data [，config]]）
axios.patch（url [，data [，config]]）

# 三、执行 GET 请求

// 向具有指定ID的用户发出请求
axios.get('/user?ID=12345')
.then(function (res) {
    console.log(res);
})
.catch(function (error) {
    console.log(error);
});
 
// 也可以通过 params 对象传递参数
axios.get('/user', {
    params: {
        ID: 12345
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

@前端进阶之旅: 代码已经复制到剪贴板

# 四、执行 POST 请求

axios.post('/user', {
    userId:"123"
},{
    headers:{
        token:"abc"
    }
})
.then(function (res) {
    console.log(res);
})
.catch(function (error) {
    console.log(error);
});

@前端进阶之旅: 代码已经复制到剪贴板

# 五、通过配置方式发送请求

get请求是发送参数，在params中定义。而POST请求是发送request body,需要在data中定义

// get 在params中定义
axios({
    url:"pakage.json",
    method:"get",
    params:{
        userId:"123"
    },
    headers:{
        token:"http-test"
    }
}).then(res=>{
    console.log(res.data);
})

// post 在data中定义
axios({
    url:"pakage.json",
    method:"post",
    data:{
        userId:"123"
    },
    headers:{
        token:"http-test"
    }
}).then(res=>{
    console.log(res.data);
})

@前端进阶之旅: 代码已经复制到剪贴板

# 六、执行多个并发请求

function getUserAcount(){
    // 返回一个promise对象
    return axios.get("/user/1234");
}
function getUserPermissions(){
    // 返回一个promise对象
    return axios.get("/user/1234/getUserPermissions");
}

//一次性返回两个接口
axios.all([getUserAccount(),getUserPerssions()]).then(axios.spread((acct, perms) => {
    // spread展开两个返回的结果
    //两个请求现已完成
}))

@前端进阶之旅: 代码已经复制到剪贴板

# 七、全局拦截

new Vue({
    el:"app",
    data:{
        msg:""
    },
    // 初始化生命周期的一个函数
    mounted:function(){
     //拦截请求之前
       axios.interceptors.request.use(config=>{
           //这里做一些拦截操作,拦截用户的请求 请求之前做一些loading处理
           return config;
       })
       //拦截响应之后处理
       axios.interceptors.response.use(response=>{
           //这里做一些拦截操作,响应以后做什么，在返回数据
           return response;
       })
    },

    methods: {
        get: function() {
        
        },
        post:function() {
           
        }
    }
})

@前端进阶之旅: 代码已经复制到剪贴板

# 八、请求封装、异常统一处理

vue中采用axios处理网络请求，避免请求接口重复代码，以及各种网络情况造成的异常情况的判断，采用axios请求封装和异常拦截操作

# 8.1 axios 请求封装

//  引入axios文件包
import axios from 'axios'

// POST 方法封装  (参数处理)
export const postRequest = (url, params) => {
  return axios({
    method: 'post',
    url: url,
    data: params,
    transformRequest: [function (data) {
      let ret = ''
      for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });
}

// POST 方法封装  (文件上传)
export const uploadFileRequest = (url, params) => {
  return axios({
    method: 'post',
    url: url,
    data: params,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });
}

//  GET 方法封装
export const getRequest = (url) => {
  return axios({
    method: 'get',
    url: url
  });
}

//  PUT 方法封装
export const putRequest = (url, params) => {
  return axios({
    method: 'put',
    url: url,
    data: params,
    transformRequest: [function (data) {
      let ret = ''
      for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });
}

//  DELETE 方法封装
export const deleteRequest = (url) => {
  return axios({
    method: 'delete',
    url: url
  });
}

@前端进阶之旅: 代码已经复制到剪贴板

# 8.2 axios请求异常统一处理

请求出错的时候执行的是：Promise.resolve(err);，而不是Promise.reject(err);，这样无论请求成功还是失败，在成功的回调中都能收到通知

# 8.3 vue 项目中使用该方法

在main.js中导入所有请求方法

//  导入所有请求方法
import {getRequest,postRequest,deleteRequest,putRequest} from './utils/api'

@前端进阶之旅: 代码已经复制到剪贴板

将请求方法添加至 Vue.prototype 上

//  向VUE的原型上添加请求方法
Vue.prototype.getRequest = getRequest;
Vue.prototype.postRequest = postRequest;
Vue.prototype.deleteRequest = deleteRequest;
Vue.prototype.putRequest = putRequest;

@前端进阶之旅: 代码已经复制到剪贴板

发送请求（请求方法的调用）

//  发送网络请求
this.postRequest('/login', {userName，password}).then(resp=> {
        ...
    }
});

@前端进阶之旅: 代码已经复制到剪贴板

# 九、接口封装处理

vue中Axios的封装与API接口的管理详解

# 9.1 axios的封装

在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等

一般我会在项目的src目录中，新建一个request文件夹，然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口

// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，后面会提到
// vant的toast提示框组件，大家可根据自己的ui组件更改。
import { Toast } from 'vant';

@前端进阶之旅: 代码已经复制到剪贴板

# 9.2 环境的切换

我们的项目环境可能有开发环境、测试环境和生产环境。我们通过node的环境变量来匹配我们的默认的接口url前缀。axios.defaults.baseURL可以设置axios的默认请求地址就不多说了

// 环境的切换
if (process.env.NODE_ENV == 'development') { 
 axios.defaults.baseURL = 'https://www.baidu.com';} 
else if (process.env.NODE_ENV == 'debug') { 
 axios.defaults.baseURL = 'https://www.ceshi.com';
} 
else if (process.env.NODE_ENV == 'production') { 
 axios.defaults.baseURL = 'https://www.production.com';
}

@前端进阶之旅: 代码已经复制到剪贴板

# 9.3 设置请求超时

通过axios.defaults.timeout设置默认的请求超时时间。例如超过了10s，就会告知用户当前请求超时，请刷新等

axios.defaults.timeout = 10000;

@前端进阶之旅: 代码已经复制到剪贴板

post请求头的设置post请求的时候，我们需要加上一个请求头，所以可以在这里进行一个默认的设置，即设置post的请求头为application/x-www-form-urlencoded;charset=UTF-8