vue中axios的简单使用以及封装

 

安装

npm install axios --save

首先介绍简单的使用

在我们需要使用的地方引入axios  , 然后便可以使用了

import axios from 'axios'     //引入

使用

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

这些只是简单的使用，下面介绍对axios进行封装以及对post,get的封装

首先我们需要单独创建一个js文件     我这里在src下创建了一个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'

getinfo(){
  let params={
    id:''
  }
  getInfo(params).then(res=>{
    console.log(res)
  })
}

方法不止一种