ホームページ > 記事 > ウェブフロントエンド > Vue での axios のカプセル化に関する簡単な説明
次のVue.jsチュートリアル列では、vueでのaxiosのカプセル化について説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。
vue での axios のカプセル化
最初のステップは、まず axios をダウンロードすることです
cnpm install axios -S
2 番目のステップステップは httpttp.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}//从哪个页面跳转 }) } 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) }) }) }
を作成することです。 3 番目のステップ
#
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;を main.js に導入し、最後にそれをコンポーネント
mounted(){ this.$fetch('/api/v2/movie/top250') .then((response) => { console.log(response) }) }, //其余的方法一样## で直接使用します。 #関連の推奨事項:
プログラミング教育2020 フロントエンド vue インタビューの質問の概要 (回答付き) vue チュートリアルの推奨事項: 最新2020 年の 5 つの vue.js ビデオ チュートリアルの選択プログラミング関連の知識の詳細については、
以上がVue での axios のカプセル化に関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。