标签:scree led traceback sed ts包 www val return elf
1.下载axios
yarn add axios
或者 npm install axios --save
2.在src文件下新建utils文件夹,创建config.js,https.js,api.js文件
在config.js里面封装axios请求基本信息
export default { // 基础url前缀 // baseURL:‘/url‘, baseURL:"http://8.129.173.112:8080", // 配置请求头信息 headers: { ‘Content-Type‘:‘application/json;charset=UTF-8‘, }, // 设置超时时间 timeout: 5000, }
在https.js里面分装请求方法
// 引入axios import axios from ‘axios‘ import configjs from ‘./config.js‘; // 创建axios实例 const httpService = axios.create({ baseURL: configjs.baseURL, timeout: configjs.timeout // 请求超时时间 }); // request拦截器 httpService.interceptors.request.use( config => { // 根据条件加入token-安全携带 if (true) { // 需自定义 // 头部 config.headers = configjs.headers; } return config; }, error => { // 请求错误处理 Promise.reject(error); } ) // respone拦截器 httpService.interceptors.response.use( response => { // 统一处理状态 const res = response.data; if (res.code != 1) { // 需自定义 // 返回异常 return Promise.reject({ status: res.statuscode, message: res.message }); } else { return response.data; } }, // 处理处理 error => { if (error && error.response) { switch (error.response.status) { case 400: error.message = ‘错误请求‘; break; case 401: error.message = ‘未授权,请重新登录‘; break; case 403: error.message = ‘拒绝访问‘; break; case 404: error.message = ‘请求错误,未找到该资源‘; break; case 405: error.message = ‘请求方法未允许‘; break; case 408: error.message = ‘请求超时‘; break; case 500: error.message = ‘服务器端出错‘; break; case 501: error.message = ‘网络未实现‘; break; case 502: error.message = ‘网络错误‘; break; case 503: error.message = ‘服务不可用‘; break; case 504: error.message = ‘网络超时‘; break; case 505: error.message = ‘http版本不支持该请求‘; break; default: error.message = `未知错误${error.response.status}`; } } else { error.message = "连接到服务器失败"; } return Promise.reject(error); } ) /*网络请求部分*/ /* * get请求 * url:请求地址 * params:参数 * */ export function get(url, params = {}) { return new Promise((resolve, reject) => { httpService({ url: url, method: ‘get‘, params: params }).then(response => { resolve(response); }).catch(error => { reject(error); }); }); } /* * post请求 * url:请求地址 * params:参数 * */ export function post(url, params = {}) { return new Promise((resolve, reject) => { httpService({ url: url, method: ‘post‘, data: params }).then(response => { resolve(response); }).catch(error => { reject(error); }); }); } /* * 文件上传 * url:请求地址 * params:参数 * */ export function fileUpload(url, params = {}) { return new Promise((resolve, reject) => { httpService({ url: url, method: ‘post‘, data: params, headers: { ‘Content-Type‘: ‘multipart/form-data‘ } }).then(response => { resolve(response); }).catch(error => { reject(error); }); }); }
//可按情况添加 export default { get, post, fileUpload }
在api.js里面分装请求接口
import http from ‘./https‘ // 倒入 api /** * 获取企业详情 * */ const getCompany = params =>{ return http.get(‘/api/shenguiyuan/company/get‘, params) } // 默认全部倒出 // 根据需要进行 export default { getCompany }
然后,在main.js里面定义全局api
import Vue from ‘vue‘ import App from ‘./App.vue‘ import router from ‘./router‘ import store from ‘./store‘ import apis from ‘./utils/api‘ Vue.config.productionTip = false Vue.prototype.$api=apis; new Vue({ router, store, render: h => h(App) }).$mount(‘#app‘)
最后,在组件里面引用$api获取数据
let fromData = {
queryId:1
}
this.$api.getOrganization(fromData).then(res => { if(res.code==200){ let componyDetail=res.data.data } }
标签:scree led traceback sed ts包 www val return elf
原文地址:https://www.cnblogs.com/huny/p/13467148.html