-
安装axios
1、npm i axios 2、npm install qs.js --save //这一步可以先忽略,它的作用是能把json格式的直接转成data所需的格式
ps:安利给大家一个前端非常实用的网站,用了都说好npm
-
在项目目录中新建一个文件夹为utils,在utils文件夹中创建request.js
-
引用axios
import axios from "axios"; // Full config: https://github.com/axios/axios#request-config // axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || ''; // axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; let config = { baseURL:'http://localhost:8888', // baseURL: process.env.baseURL || process.env.apiUrl || "", timeout: 5 * 1000, // Timeout withCredentials: true, // Check cross-site Access-Control }; const service = axios.create(config); service.interceptors.request.use( function(config) { // Do something before request is sent return config; }, function(error) { // Do something with request error return Promise.reject(error); } ); // Add a response interceptor service.interceptors.response.use( function(response) { // Do something with response data return response; }, function(error) { // Do something with response error return Promise.reject(error); } ); export default service
-
封装后端api
ps:我这里将所有的api封装在src/api文件夹下
例如:获取所有的专家信息
import request from "../utils/request";
import qs from 'qs.js';
//获取专家所有信息
export function getInfo(){
return request.get(`/sysUser/getAllExpert`)
}
5.调用封装的接口
<template>
<div>
专家信息
</div>
</template>
<script>
import {getInfo} from '../api/expert'
export default {
name: "Index",
data(){
return{
expertList:[]
}
},
mounted() {
getInfo().then(res=>{
console.log(res)
},err=>{
console.log(err)
})
}
}
</script>
<style scoped>
</style>