vue封装使用axios

一、下载安装axios

1. 下载命令
   shell 复制

   1

   npm install axios

2. mian.js文件中导入aixos
   javascript 复制

   1 2 3

   import axios from 'axios'
   //个$tttp变量赋值
   Vue.prototype.$http=axios;

二、封装axios

1. 创建loginfiler.js设置并配置
   ```javascript
   import axios from 'axios'
   import { getCookie } from '../config/cookieUtils'
   /**

• 拦截器
• /
  let loginfiler = axios.create({
  headers: {
  text 复制

  1

  'content-type': 'application/json'

  }
  })
  loginfiler.interceptors.request.use(
  config => {
  text 复制

  1 2 3 4 5 6

    const token =  getCookie('token')
    // console.log("token",token)
  if (token) { // 判断是否存在token，如果存在的话，则每个http header都加上token
    config.headers.token = token  //请求头加上token
  }
  return config

  },
  err => {
  text 复制

  1

  return Promise.reject(err)

  })
  // http response 拦截器
  loginfiler.interceptors.response.use(
  response => {
  text 复制

  1 2 3 4 5 6 7 8 9

  //拦截响应，做统一处理 
  if (!response.data.is) {
        // router.replace({
        //   path: '/home',
        //   query: {
        //     redirect: router.currentRoute.fullPath
        //   }
        // })
  }

  const token = getCookie("token");
  //console.log("返回响应"+token)
  text 复制

  1

  return response

  },
  //接口错误状态处理，也就是说无响应时的处理
  error => {
  text 复制

  1

  // return Promise.reject(error.response.data) // 返回接口返回的错误信息

  })
  //最后导出对象
  export default loginfiler
  ```

2. 创建api.js文件

import instance from './loginfiler'
export const  axipost = async (data,url) => {
    url = '/api/' + url;
    return  instance.post(url,data);
};

export const  axiget = async (data,url) => {
    return  instance.get(url,data);
};

三、使用方法

首先导入到当前组件中

import { axipost } from '../filer/api'

访问后台接口

//后台的接口地址
let url = "com/t-essay/getAll";
//获取地址路由传递过来的参数
let keyWord =this.$route.params.keyWord;
//想要传递给后台的数据
let data ={username:this.seach,essayName:this.seach,pageNum:this.pageNum,pageSize:this.pageSize,tallieName:this.TallieName,keyWord:keyWord}
//获取后台接口返回的数据
let res = await axipost(data,url);