详解vue中axios的封装


            第一步还是先下载axios





cnpm install axios -S



第二步建立一个htttp.js





import axios from 'axios';

import { Message } from 'element-ui';



axios.defaults.timeout = 5000;

axios.defaults.baseURL ='';





//http request 拦截器

axios.interceptors.request.use(

 config => {

  // const token = getCookie('名称');注意使用的时候需要引入cookie方法，推荐js-cookie

  config.data = JSON.stringify(config.data);

  config.headers = {

   'Content-Type':'application/x-www-form-urlencoded'

  }

  // if(token){

  //  config.params = {'token':token}

  // }

  return config;

 },

 error => {

  return Promise.reject(err);

 }

);





//http response 拦截器

axios.interceptors.response.use(

 response => {

  if(response.data.errCode ==2){

   router.push({

    path:"/login",

    querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转

   })

  }

  return response;

 },

 error => {

  return Promise.reject(error)

 }

)





/**

 * 封装get方法

 * @param url

 * @param data

 * @returns {Promise}

 */



export function fetch(url,params={}){

 return new Promise((resolve,reject) => {

  axios.get(url,{

   params:params

  })

  .then(response => {

   resolve(response.data);

  })

  .catch(err => {

   reject(err)

  })

 })

}





/**

 * 封装post请求

 * @param url

 * @param data

 * @returns {Promise}

 */



 export function post(url,data = {}){

  return new Promise((resolve,reject) => {

   axios.post(url,data)

     .then(response => {

      resolve(response.data);

     },err => {

      reject(err)

     })

  })

 }



 /**

 * 封装patch请求

 * @param url

 * @param data

 * @returns {Promise}

 */



export function patch(url,data = {}){

 return new Promise((resolve,reject) => {

  axios.patch(url,data)

     .then(response => {

      resolve(response.data);

     },err => {

      reject(err)

     })

 })

}



 /**

 * 封装put请求

 * @param url

 * @param data

 * @returns {Promise}

 */



export function put(url,data = {}){

 return new Promise((resolve,reject) => {

  axios.put(url,data)

     .then(response => {

      resolve(response.data);

     },err => {

      reject(err)

     })

 })

}



第三步

在main.js中引入





import axios from 'axios'

import {post,fetch,patch,put} from './utils/http'

//定义全局变量

Vue.prototype.$post=post;

Vue.prototype.$fetch=fetch;

Vue.prototype.$patch=patch;

Vue.prototype.$put=put;



最后在组件里直接使用





mounted(){

  this.$fetch('/api/v2/movie/top250')

   .then((response) => {

    console.log(response)

   })

 },



其余的方法一样