vue中axios的封裝（簡易版攔截，get，post

 

 

 

第一步仍是先下載axios

npm install axios --save

第二步/src/utils/目錄下創建一個htttp.js

import axios from 'axios'; 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' } // 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) }) }) }

第三步

在main.js中引入

 

import {post,get} from './utils/http' //定義全局變量 Vue.prototype.$post=post; Vue.prototype.$get=get;

最後在組件裏直接使用

mounted(){
    this.$post('/api/v2/movie/top250') .then((response) => { console.log(response) }) }, 其他的方法同樣