vue 封装 axios 和 各类的请求，以及引入 .vue 文件中使用

//src 底下建立 api 文件夹

// api 文件夹下建立 request,js 文件，文件内容复制下面这段代码即可

 

/**

 * ajax请求配置

 */

import axios from 'axios'

import { Message } from 'element-ui'

// axios默认配置

axios.defaults.timeout = 10000 // 超时时间

// 整理数据 --- 可要可不要，这个问题不大，无所谓

// axios.defaults.transformRequest = function(data) {

//     data = JSON.stringify(data)

//     return data

// }

// 定义请求头 使用JSON格式

axios.defaults.baseURL = 'apis/api/' 

axios.defaults.headers.post //post 要单独设置,下面的 api.js 会说明

axios.defaults.headers.get['Content-Type'] = 'application/json;charSet=UTF-8'

axios.defaults.headers.put['Content-Type'] = 'application/json;charSet=UTF-8'

axios.defaults.headers.delete['Content-Type'] = 'application/json;charSet=UTF-8'

axios.defaults.headers.patch['Content-Type'] = 'application/json;charSet=UTF-8'

// 路由请求拦截

axios.interceptors.request.use(

    config => {

        config.headers['Content-Type'] = 'application/x-www-form-urlencoded; multipart/form-data'

        config.headers['Authorization'] = 'Bearer '+ window.localStorage.getItem('access_token')

        config.headers['Accept'] = 'application/json'

        return config

    },

    error => {

        return Promise.reject(error.response)

    }

)

// 路由响应拦截

axios.interceptors.response.use(

    response => {

        if(response.status === 401){ // token过期

            Message.error(response.data.errDesc)

            window.localStorage.removeItem('access_token');

            router.replace({

                path: '/', //返回登录页重新登录

                query: {

                    redirect: router.currentRoute.fullPath

                }

            })

        }else{

            return response.data

        }

    },

    error => {

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

    }

)

export default axios

 

 

// 和 request.js 同层 建立 api.js（由于是一个人开发，所以只建立一个 api.js，可以根据自己需要把 request.js 导入到自己需要的 api.js 的文件中去）

//统一封装api请求

import request from '../api/request'

import axios from 'axios' // 可以自行手写的 axios 请求

import qs from 'qs' // 可以用于转换 post 需要的 fromData 格式

import url from 'postcss-url';

 

// 导出接口

export function 接口名字( 传给后端的接口参数 ) {

    return request({

        url: '  ',//接口路径

        method: 'post', //请求方式

        

        //转换数据格式 --- 这段代码很关键，用于转换post 的fromData 格式的

        transformRequest: [

            function(data) {

                let ret = '';

                for (let it in data) {

                    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';

                }

                return ret;

            }

        ],

　　// 头部必须设置是 fromData 格式，不然会报错

        headers:{

　　　　'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'

        },

　　// 接口数据 - 上面括号传过来的数据

        data : {

            

        }

    })

}

 

 

// vue 文件中的使用

script 中

import { 上面定义的接口名字 } from ' 自己定义的 api.js 的文件路径 '

 

export default{

　　methods: {

　　　　

　　　　

自己定义一个方法名字用于调用(传给后台的参数： 例如 ： 分页，搜索框 ){

　　　　

            api.js 的 方法名字 ( 这里是传入 api.js 的方法中的参数 ).then(res=>{

                　　接收数据

            　　}).catch(()=>{

                　　this.$message.error(" 数据发生错误的时候的提示 ")

            　　})

        　　},

 

　　}

}