vue项目如何使用axios封装request请求以及Cookies的使用

本文链接：https://blog.youkuaiyun.com/qq_44962364/article/details/132099859

步骤一：安装axios

在Vue项目中使用axios需要先安装axios库。在命令行中进入到Vue项目所在的文件夹，运行以下命令：

npm install axios --save

步骤二：封装axios

1.src 目录中新建utils文件夹
2.utils文件中建立request.js文件

request.js文件的内容为

导入axios
我们可以配置一些基础公共的路径配置
设置请求拦截
设置响应拦截
导出导出这个模块

request.js的完整代码

import axios from 'axios'
import { Notification , Message} from 'element-ui' //引入element-ui库
import { getToken } from '@/utils/auth'; // 引入Cookies
// 创建axios实例
const service = axios.create({
  baseURL: process.env.API_ROOT, // 设置请求的基本URL
  timeout: 5000, // 请求超时时间
   withCredentials: true, //表示跨域请求时是否需要使用凭证
})
// request拦截器
service.interceptors.request.use(
  config => {
      if (getToken()) {
           config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
      } else {
        config.headers['Authorization'] = `Bearer ${''}`; 
      }
      return config
  },
  error => {
      Promise.reject(error)
  }
)
// 拦截器方式 一
// response 
service.interceptors.response.use(
  response => {
      return response.data
  },
  error => {
      // 兼容blob下载出错json提示
      if (error.response.data instanceof Blob && error.response.data.type.toLowerCase().indexOf('json') !== -1) {
          const reader = new FileReader()
          reader.readAsText(error.response.data, 'utf-8')
          reader.onload = function () {
              const errorMsg = JSON.parse(reader.result).message
              Notification.error({
                  title: errorMsg,
                  duration: 5000
              })
          }
      } else {
          let code = 0
          try {
              code = error.response.data.status
          } catch (e) {
              if (error.toString().indexOf('Error: timeout') !== -1) {
                  Notification.error({
                      title: '网络请求超时',
                      duration: 5000
                  })
                  return Promise.reject(error)
              }
          }

          if (code) {
               if (code === 401) {
                  //  store.dispatch('LogOut').then(() => {
                  //      // 用户登录界面提示
                  //      Cookies.set('point', 401)
                  //      location.reload()
                  // })
               } else if (code === 403) {
                  //  router.push({ path: '/401' })
               } else {
              const errorMsg = error.response.data.message
              if (errorMsg !== undefined) {
                  Notification.error({
                      title: errorMsg,
                      duration: 0
                  })
              }
            }
          } else {
              Notification.error({
                  title: '接口请求失败',
                  duration: 5000
              })
          }
      }
      return Promise.reject(error)
  }
)
// 拦截器方式 二

// service.interceptors.response.use(
//   res => {
//     if (res.status === 200) {
//       return res.data;
//     } else {
//       return Promise.reject(new Error(res.data.Data.Message || 'Error'));
//     }
//   },
//   error => {
//     Message.error(showStatus(error.response.status)); // , error.response.data
//     return Promise.reject(error);
//   }
// );


// const showStatus = (code, errMessage) => {
//   let message = '';
//   switch (code) {
//     case 400: message = errMessage || '请求错误(400)'; break;
//     case 401: message = '未授权，请重新登录(401)'; break;
//     case 403: message = '拒绝访问(403)'; break;
//     case 404: message = '请求出错(404),未找到文件'; break;
//     case 408: message = '请求超时(408)'; break;
//     case 500: message = '服务器错误(500)'; break;
//     case 501: message = '服务未实现(501)'; break;
//     case 502: message = '网络错误(502)'; break;
//     case 503: message = '服务不可用(503)'; break;
//     case 504: message = '网络超时(504)'; break;
//     case 505: message = 'HTTP版本不受支持(505)'; break;
//     default: message = `连接出错(${code})!`;
//   }
//   return `${message}`;
// };

//将service导出
export default service;

2.1 Element以及Cookies的安装命令

// element-ui 安装命令
npm i element-ui -S

// cookie 安装命令
npm install js-cookie

2.1.1 Cookies 的使用

1.utils文件中建立auth.js文件

2.auth.js的完整代码(Cookies配置)

import Cookies from 'js-cookie';

const TokenKey = 'vue_admin_template_token';

// 获取Cookies
export function getToken() {
  return Cookies.get(TokenKey);
}
// 设置Cookies
export function setToken(token) {
  return Cookies.set(TokenKey, token);
}
// 移除Cookies
export function removeToken() {
  return Cookies.remove(TokenKey);
}

步骤三：封装api

3.1封装api

src 目录中新建api文件夹
api文件中建立example.js文件

example.js示例代码

注意请求方式
注意传参方式
每一个api.js文件必须引入封装好的axios

// 导入封装好的axios
import request from '@/utils/request';

// 获取当前登录人信息
export function Getlogininformation(data) {
  return request({
    url: `/api/ProjectManage/Getlogininformation`,
    method: 'post', // 注意接口是get还是post
    data   // data:data简写为data  // data传参
  });
}

// 获取当前列表信息
export function IndexList(data) {
  return request({
    url: `/api/IndexList?pageIndex=${data.pageIndex}&pageSize=${data.pageSize}`, // 路由后拼接传参
    method: 'post',
  })
}

3.2使用api

代码示例

引入封装好的api
使用api获取信息
展示所获取的信息

<template>
    <div class="HelloWorld">
      <h1>当前登录人的信息</h1>
        <ul>
          <!-- 循环获取的对象 -->
          <li v-for="(value, key) in information"  :key="key">
            <!-- 判断key是不是用户列表 -->
            <div v-if="key != 'UserList'">
              {{ key }}: {{ value }}
            </div>
            <template v-else >
              <h4>UserList为一个数组</h4>
              <div style="display: flex;">
                <!-- 继续循环用户列表，用户列表是一个数组 -->
                <div v-for="(item,index) in value" :key="index" style="margin-right: 50px;">
                  <span>UserList中第{{index+1}}条数据为：</span>
                  <!-- 在循环每一个用户的信息 -->
                  <p v-for="(arr,keys) in item" :key="keys"> {{ keys }}: {{ arr }}</p>
                </div>
              </div>
            </template>
          </li>
        </ul>
    </div>
</template>

<script>
// 引入封装好的api文件及要使用的接口方法
import { Getlogininformation } from '@/api/example';
export default {
    name: 'HelloWorld',
    data() {
      return { 
        // 在data中定义接收参数
        information:{} 
      }
    },
    mounted() {
      // 使用获取当前登录人信息接口
      Getlogininformation().then((res) =>{
        // 拿到数据后给参数赋值并展示
        if(res.Flag){
          this.information = res.Data
        } else {
          // 输出错误
          this.$alert.error(res.Message);
        }
      })
    },
   
}
</script>