Vue 封装简单 axios

首先使用npm安装axios

npm install axios

在src文件下建一个request文件,里边放封装的axios,和请求后台的api,api.js写的是请求后台的接口暴露的方法http.js是封装的axios(两个api是因为项目分两个模块两个人写的)

先说http.js 里边暴露了四个方法,因为场景需要,简单的项目一般只需要get和post两个方法就可以了,可以看到显示引入axios和QS,QS的作用就是用于处理传给后台的参数,博客里边有,回归代码get和post都是简单的请求,后边的两个方法是一个是文件上传,一个是因为业务需要然后post请求的参数需要拼接到url上(代码可以直接复制)

/*
封装ajax
*/
import QS from 'qs'
import Axios from 'axios'
/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get(url, params){
    return new Promise((resolve, reject) =>{
        Axios.get(url,{
      params:params
     } ).then(res => {
            resolve(res.data);
        }).catch(err =>{
            reject(err.data)
    })
});}
/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function post(url, params) {
    return new Promise((resolve, reject) => {
         Axios.post(url,QS.parse(params))
        .then(res => {
            resolve(res.data);
        })
        .catch(err =>{
            reject(err.data)
        })
    });
}

/**
 * post上传文件
 */
export function filePost(url,params){
	return new Promise((resolve,reject)=>{
		Axios.post(url,params)
		.then(res =>{
			resolve(res.data);
		})
		.catch(err =>{
			reject(err.data)
		})
	})
}
/**
 * post请求 参数拼接url
 * */
 export function postU(url, params) {
     return new Promise((resolve, reject) => {
          Axios.post(url,QS.stringify(params))
         .then(res => {
             resolve(res.data);
         })
         .catch(err =>{
             reject(err.data)
         })
     });
 }

上边已经把axios封装好了,下来就是请求接口,首先把封装axios的方法用import引入,使用的时候直接按照下边的格式写就好了 .

p是参数.如果不需要不用写

/**
 * api
 * */
import {
  get,
  post,
  filePost,
  postU
} from '@/request/http.js'


export const getFind = (p) => post('url', p)

上边已经把axios,api都封装好了,下一步就是使用.使用就很简单

//引入api
import {getFind} from '@/request/api.js'



methods: {
getFind(){
//使用api暴露的方法请求数据
let p={}//参数
    getfind(p)
.then((ref)=>{
    console.log(ref)//获取到的数据
        })
.catch((err)=>{
console.log(err)
        })
    }
}