vue封裝axios
阿新 • • 發佈:2021-11-18
記得要安裝axios 哦,npm install axiosvue-axios -S
然後再main.js中全域性使用
import axios from './utils/axios';
import VueAxios from 'vue-axios';
//axios,VueAxios的引入
Vue.use(VueAxios, axios);
先分了兩個步驟:
1、抽取出來的config檔案中就是生成環境以及開發環境的地址
// 開發環境地址 const devUrl = '/api/' //生產環境地址 // const productionUrl = 'http://115.233.221.136/:81/hy_comm_api/' const productionUrl = 'http://localhost:8080/api/' const httpUrl = { development: devUrl, production: productionUrl } const config = { baseUrl: httpUrl[process.env.NODE_ENV] } export default config
2、主要的是axios的響應跟請求的封裝了
import axios from 'axios' import Config from './config' // import { Message } from 'element-ui' const service = axios.create({ baseURL: Config.baseUrl, timeout: 60000 }) service.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8' // request攔截器 service.interceptors.request.use( config => { return config }, error => { Promise.resolve(error) } ) // respone攔截器 service.interceptors.response.use( response => { if (response.data.errorcode != 200) { console.log(response.config.url) } return response.data.data }, error => { // do something 攔截響應 return Promise.reject(error) } ) export default service