vue封装使用axios

一、下载安装axios

1. 下载命令

   npm install axios
   

2. mian.js文件中导入aixos

   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: {

  'content-type': 'application/json'
  

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

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

  }, err => {

  return Promise.reject(err)
  

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

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

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

  return response
  

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

  // 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);