第一步還是先下載axios
cnpm i axios --save
第二步建立一個request.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",
? ? ? ? query:{redirect:router.currentRoute.fullPath}//從哪個頁面跳轉(zhuǎn)
? ? ? })
? ? }
? ? 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)
? ? ? })
? },
其余的方法一樣
