vue简单封装axios

安装

npm install axios --save

在需要使用的地方引入axios，然后便可以使用

import axios from 'axios'     //引入

使用

axios({
    headers:{
        Authorization:''      //token
    },
    url: "",             //接口地址
    method: "",          //请求方式
    data: {},            //参数
}).then(res => {
    console.log(res)
})

axios的封装

首先需要单独创建一个axios文件夹，在文件夹下创建index.js

import axios from 'axios'     //引入
 
//这一步的目的是判断出当前是开发环境还是生成环境，方法不止一种，达到目的就行
let baseURL = ''
if(process.env.NODE_ENV=="development"){
  baseURL=''
}else{
  baseURL=''
}
 
let config = {
  baseURL: baseURL,
  timeout: 30000
}
const _axios = axios.create(config)
 
/* 请求拦截器（请求之前的操作） */
_axios.interceptors.request.use(
  config => {
      //如果有需要在这里开启请求时的loading动画效果
      config.headers.Authorization = '';  //添加token,需要结合自己的实际情况添加，
    return config;
  },
  err => Promise.reject(err)
);
 
/* 请求之后的操作 */
_axios.interceptors.response.use(
  res => {
    //在这里关闭请求时的loading动画效果
    //这里用于处理返回的结果，比如如果是返回401无权限，可能会是跳回到登录页的操作，结合自己的业务逻辑写
    if (res.data.code === 401 ) {
        
    }
    return res;
  },
  err => {
    if (err) {
      
    }
    return Promise.reject(err);
  }
);
 
//封装post,get
const http = {
  get(url='',params={}){
    return new Promise((resolve, reject) => {
      _axios({
        url,
        params,
        headers:{'Content-Type': 'application/json;charset=UTF-8'},
        method: 'GET'
      }).then(res => {
        resolve(res.data)
        return res
      }).catch(error => {
        reject(error)
      })
    })
  },
  post(url='',params={}){
    return new Promise((resolve, reject) => {
      _axios({
        url,
        params,
        headers:{'Content-Type': 'application/json;charset=UTF-8'},
        method: 'POST'
      }).then(res => {
        resolve(res.data)
        return res
      }).catch(error => {
        reject(error)
      })
    })
  }
}
//这里解释下为什么headers的Content-Type不与token写在一块，当然也可以写在一块，但是主要是因为上传附件的Content-Type与普通接口的Content-Type不同
 
export default http

然后创建一个api.js

import http from '../axios/index'
​
export function getInfo(params) {
  return http.get('/gay-hmsnew/api-basic/getInfo', params)
}

最后在我们用的页面上

import {getInfo} from './api'
​
.......
methods:{
    getinfo(){
        let params={
            id:''
        }
        getInfo(params).then(res=>{
            console.log(res)
        })
    }
}