vue中axios的封裝

標籤：code   需要   resolve   push   全域變數   全域   axios   config   第一步   

第一步還是先下載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)      })  },其餘的方法一樣

 

vue中axios的封裝