axios

1,对axios的封装

第一步还是先下载axios
cnpm install axios -S
第二步建立一个http.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('名称');
config.data = JSON.stringify(config.data);
config.headers ={
'Content-Type':' application/x-www-form-urlencoded'
}
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(error => { reject(error) })
})
}

/**
 * 封装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)
}),error=>{
  reject(error)
}
})
}
 /**
 * 封装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)
      })
  },