axios是什么？如何在项目中使用?

什么是 axios？

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

特性
-从浏览器中创建 XMLHttpRequests
-从 node.js 创建 http 请求
-支持 Promise API
-拦截请求和响应
-转换请求数据和响应数据
-取消请求
-自动转换 JSON 数据
-客户端支持防御 XSRF

安装

使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

在项目中使用

引入axios到
src\utils\request.js

import axios from 'axios'

import store from '@/store'

// // create an axios instance
// 创建一个axios实例
const service = axios.create({
  // baseURL: 'http://ihrm-java.itheima.net', // 设置axios请求的基础的基础地址
  baseURL: process.env.VUE_APP_BASE_API, // 从环境变量设置基地址
  timeout: 5000 // 定义5秒超时
})

// 响应拦截器
service.interceptors.response.use(response => {
  if (response.data.success) {
    // 操作成功
    return response.data
  } else {
    // 如果success为false 业务出错,直接触发reject
    // 被catch分支捕获
    return Promise.reject(new Error('请求失败'))
  }
}, async error => {
  console.log('请求出错啦', error)
  if (error.response.data.code === 10002) {
    // 这个表示token失效的10002是和后端商量好的 并不是http默认的
    console.log('token失效')
    // 如果响应回来的code=10002 调用actions中的user模块中的logout方法
    await store.dispatch('user/logout')
    // .vue -- this.$route.fullPath
    //  .js -- router.currentRoute.fullPath

    // router.push('/login?return_url=' + encodeURIComponent(router.currentRoute.fullPath))
  }
  // 如果有错误 打印出来错误
  console.dir(error)
  console.log(error)
  return Promise.reject(error)// 返回执行错误 让当前的执行链跳出成功 直接进入 catch
})

// 请求拦截器
service.interceptors.request.use(config => {
  // 从vuex中拿到保存的token
  const token = store.state.user.token
  if (token) {
    // 如果token存在 请求头里加上'Authorization'
    config.headers['Authorization'] = `Bearer ${token}`
  }
  return config
}, error => {
  // 如果请求有错误 打印出错误
  console.log(error)
  // 返回执行错误 让当前的执行链跳出成功 直接进入catch
  return Promise.reject(error)
})
// 最后一定要导出axios实例
export default service

引入axios实例到
src\api\user.js （这个实例的名字是可以修改的，不一定要与上面的实例一致）

import request from '@/utils/request'

/**
 * 登录请求
 * @param {mobile,password} data
 * @returns
 */
export function login(data) {
  return request({
    url: '/sys/login',
    method: 'post',
    data
  })
}

// 请求用户信息
export function getProfile() {
  return request({
    url: '/sys/profile',
    method: 'post'
  })
}

// 请求用户头像
export function getUserDetailById(id) {
  return request({
    url: `/sys/user/${id}`,
    method: 'get'
  })
}

项目中一般来说都是默认在src/api中写接口发请求，并且api里的请求.js文件也是分模块的，比如user.js里只包含用户信息请求，permisssion.js里只包含权限信息请求，department.js里只包含部门信息请求。