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)

         })

  })

}

npm install qs
针对post请求做处理

第三步

在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)

      })

  },

其余的方法一样

参考： https://www.cnblogs.com/ldlx-mars/p/7908950.html

参考：https://blog.csdn.net/wopelo/article/details/78783442

巴特西

vue爬坑之路（axios 封装篇）

最新文章

热门文章