vue中三種調用接口的方法
更新時間:2022年08月23日 09:31:36 作者:加蓓努力我先飛
這篇文章主要介紹了vue中三種調用接口的方法,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
1. this.$api.LeadershipScreen.getImportantRiskList(params)
在api文件下層級關系如下圖:
在index.js下
// 導入所有接口 import api from './api' const install = Vue => { if (install.installed) return; install.installed = true; Object.defineProperties(Vue.prototype, { // 注意,此處掛載在 Vue 原型的 $api 對象上 $api: { get() { return api } } }) } export default install
在api.js
/*接口統(tǒng)一模塊*/ import * as LeadershipScreen from './componet/LeadershipScreen' export default { LeadershipScreen } /*使用模板 * this.$api.auditApi.auditDataAll().then(response=>{ }).catch(error=>{ }) */
在componet/LeadershipScreen.js
import { request } from "../../utils/request6"; export const getImportantRiskList = (data) => { //allUrl2 可以寫一個公共的地方將allUrl2 引進來 return request({ method: 'get', url: allUrl2 + '/important/getImportantRiskList', data }); };
在頁面中使用
this.$api.LeadershipScreen .getImportantRiskList(params) .then((res) => { console.log("res.data111111111111", res.data); this.getList = res.data; }) .catch((error) => {});
//methodName:null; let params={} this.methodName = this.$api.LeadershipScreen.getImportantRiskList; this.methodName(params) .then((res) => { console.log("res", res); }) .catch((error) => {});
2.需要引用
定義
import request from '@/utils/request' export const selectTaskInfo = (id, params) => request({ url: '/project-mgt/project/v1.0/selectTaskInfo?taskId=' + id, method: 'get', params }) export function setFormulaConfig(params) { return request({ url: '/project-mgt/project/v1.0/formulaConfig', method: 'get', params }) }//此處的params,會自動將參數(shù)拼在后面,data則不會 export const projectSelectionAdd = (data) => request({ url: '/project-mgt/project/v1.0/add', method: 'post', data })
使用
import { selectTaskInfo, setFormulaConfig, projectSelectionAdd , } from "@/code/projectSelection/api/projectSelectionApi";
selectTaskInfo(id) .then((res) => { console.log("resaaaaaaaa", res.data); }) .catch((err) => { console.log(err); }); // let params = { id: this.Form.id, }; setFormulaConfig(params) .then((res) => { if (res.code == "200") { console.log("resaaaaaaaa", res.data); this.$message.success("成功"); } }) .catch((err) => { }); let interfaceName = this.$route.query.state == "add" ? projectSelectionAdd : projectUpdate; interfaceName(params) .then((res) => { if (res.code == "200") { this.$message.success( this.$route.query.state == "add" ? "新增" : "修改" ); } else { this.$message.error(res.msg); } }) .catch((err) => {});
3.axios(需要先安裝axios)
get
// 為給定 ID 的 user 創(chuàng)建請求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 可選地,上面的請求可以這樣做 axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
post
axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
https://www.kancloud.cn/yunye/axios/234845
getQuestionSurvey() { let testUrl = ""; if (process.env.NODE_ENV === "development") { testUrl = "http://192.168.121.2:8080";//模擬,并非真實地址 } else { testUrl = process.env.VUE_APP_BASE_API; } testUrl = testUrl + "/getFillReportById/" + this.id; axios({ method: "get", url: testUrl, headers: { "Content-Type": "application/x-www-form-urlencoded", userId: this.userId, }, }) .then((res) => { //if (this.state != "editAjustMent") { // this.tableData1.forEach((item, index) => { // for (const key in item.detailVoMap) { // if (key.length > 17) { // item.detailVoMap[key].fixedFlag = 0; // } //} //}); //} }) .catch((err) => { console.log( "err.response.data", err.response, err.response.data, err.response.data.data, err.response.data.msg ); this.$message.error( err.response.data.data ? err.response.data.data : err.response.data.msg ); }); },
4.配置request
import axios from 'axios' import { MessageBox, Message } from 'element-ui' import store from '@/store' import { getToken } from '@/utils/auth' import qs from 'qs' import cookieStore from '@/utils/common'; // Vue.prototype.$cookieStore = cookieStore; // create an axios instance const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url // withCredentials: true, // send cookies when cross-domain requests timeout: 500000000 // request timeout }) // request interceptor service.interceptors.request.use( config => { // do something before request is sent if (config.requestType === 'form') { config.headers = { 'content-type': 'application/x-www-form-urlencoded;charset=UTF-8' } console.log('form') config.data = qs.stringify(config.data, { indices: false }) } else if (config.requestType === 'json' || !config.requestType) { console.log('json') config.headers = { 'content-type': 'application/json;charset=UTF-8' } } if (store.getters.token) { config.headers['Authorization'] = getToken() } config.headers['userId'] = "1036465471609819137"; //1 return config }, error => { // do something with request error console.log(error) // for debug return Promise.reject(error) } ) // response interceptor service.interceptors.response.use( response => { const res = response.data if (res.code == 200) { return Promise.resolve(res) } else if (res.code == 0) { return Promise.resolve(res) } else if (res.code == 401) { Message.error(res.msg) store.dispatch('user/resetToken').then(() => { location.reload() }) } else if (res.code == 20000) { return Promise.resolve(res) } else { Message({ message: res.msg, type: 'error' }) return Promise.reject(res) } }, error => { console.log('err' + error) // for debug console.log(error.response) Message({ message: error.response.data.data ? error.response.data.data : error.response.data.msg, type: 'error', duration: 5 * 1000 }) return Promise.reject(error.response)//此操作,可以直接拿到報錯的信息error.response } ) export default service
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue + typescript + video.js實現(xiàn) 流媒體播放 視頻監(jiān)控功能
視頻才用流媒體,有后臺實時返回數(shù)據(jù), 要支持flash播放, 所以需安裝對應的flash插件。這篇文章主要介紹了vue + typescript + video.js 流媒體播放 視頻監(jiān)控,需要的朋友可以參考下2019-07-07Ant?Design-vue?解決input前后空格問題(推薦)
最近做項目遇到這樣一個問題輸入框不允許有前后空格但字符中間可以有空格,怎么解決這個問題呢,接下來小編把ant?Design-vue?解決input前后空格問題的實現(xiàn)代碼分享給大家,感興趣的朋友一起看看吧2022-10-10vue.js添加一些觸摸事件以及安裝fastclick的實例
今天小編就為大家分享一篇vue.js添加一些觸摸事件以及安裝fastclick的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08詳解Vue一個案例引發(fā)「內容分發(fā)slot」的最全總結
這篇文章主要介紹了詳解Vue一個案例引發(fā)「內容分發(fā)slot」的最全總結,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12