Vue学习笔记—Axios请求库

一、Axios简介

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。


二、Axios特点

拦截请求和响应
支持 Promise API
自动转换 JSON 数据
从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求


三、Axios使用

1、配置Axios实例:

var instance = axios.create({
    baseURL: 'https://some-domain.com/api/',
    timeout: 1000,
    headers: {'X-Custom-Header': 'foobar'}
});

2、Get请求:

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345').then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

// 可选地,上面的请求可以这样做
axios.get('/user', {
    params: {ID: 12345}
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

3、Post请求:

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

4、Axios处理并发请求:

function getUserAccount() {
    return axios.get('/user/12345');
}

function getUserPermissions() {
    return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
    .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成

5、Axios请求拦截:

/* 
    请求拦截器
    客户端发送请求 -> [请求拦截器] -> 服务器
    token校验(JWT) : 接受服务器返回的token,存储到vuex/本地储存当中

*/
axios.interceptors.request.use(
    (config) => {
        // 携带上token
        let token = sessionStorage.getItem('token')
        token && (config.headers.Authorization = token)
        return config
    },
    (error) => {
        return Promise.reject(error)
    }
)

6、Axios响应拦截:

/* 
    响应拦截器
    服务器换返回信息 -> [拦截统一处理] -> 客户端JS获取到信息
*/
// axios.defaults.validateStatus = status => {
//     // 自定义响应成功得HTTP状态码
//     return /^(2|3)\d{2}$/.test(status);
// }
axios.interceptors.response.use(
  (response) => {
    return response.data
  },
  (error) => {
    let { response } = error
    if (response) {
      // 服务器返回结果
      switch (response.status) {
        case 401: // 当前用户需要验证(一般是未登录)
          break
        case 403: // 服务器已接收请求,但是拒绝执行它(一般是token过期)
          sessionStorage.removeItem('token')
          break
      }
    } else {
      return Promise.reject(error)
    }
  }
)

四、项目中封装Axios请求

import axios from 'axios'
import qs from 'qs'

// 根据环境变量区分接口得默认地址
switch (process.env.NODE_ENV) {
  case 'development':
    axios.defaults.baseURL = 'https://www.liutao.com:8888/api/private/v1/'
    break
  case 'production':
    axios.defaults.baseURL = 'https://www.liutao.com:8888/api/private/v1/'
    break
  case 'test':
    axios.defaults.baseURL = 'https://www.liutao.com:8888/api/private/v1/'
    break
}

// 设置超时时间
axios.defaults.timeout = 10000
// // 跨域时候允许携带凭证
// axios.defaults.withCredentials = true;

/* 
    设置请求传递数据得格式(看服务器要求什么格式)
    x-www-form-urlencoded
*/
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
// 对 post请求做格式设置
axios.defaults.transformRequest = (data) => qs.stringify(data)

/* 
    请求拦截器
    客户端发送请求 -> [请求拦截器] -> 服务器
    token校验(JWT) : 接受服务器返回的token,存储到vuex/本地储存当中

*/
axios.interceptors.request.use(
  (config) => {
    // 携带上token
    let token = sessionStorage.getItem('token')
    token && (config.headers.Authorization = token)
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

/* 
    响应拦截器
    服务器换返回信息 -> [拦截统一处理] -> 客户端JS获取到信息
*/
// axios.defaults.validateStatus = status => {
//     // 自定义响应成功得HTTP状态码
//     return /^(2|3)\d{2}$/.test(status);
// }
axios.interceptors.response.use(
  (response) => {
    return response.data
  },
  (error) => {
    let { response } = error
    if (response) {
      // 服务器返回结果
      switch (response.status) {
        case 401: // 当前用户需要验证(一般是未登录)
          break
        case 403: // 服务器已接收请求,但是拒绝执行它(一般是token过期)
          sessionStorage.removeItem('token')
          break
        case 404: // 请求失败,请求所希望看到得资源未被在服务器上发现
          break
      }
    } else {
      // 服务器结果都没有返回(可能服务器错误可能客户端断网)
      if (!window.navigator.onLine) {
        // 断网处理:可以跳转到断网页面
        return
      }
      return Promise.reject(error)
    }
  }
)

export default axios

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 848130454@qq.com

文章标题:Vue学习笔记—Axios请求库

文章字数:965

本文作者:Spicy boy

发布时间:2018-09-25, 10:32:25

最后更新:2021-03-30, 15:56:46

原始链接:http://www.spicyboy.cn/2018/09/25/Vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E2%80%94Axios%E8%AF%B7%E6%B1%82%E5%BA%93/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏