1. The CDN introduced axios

< script SRC = "https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js" > < / script >Copy the code

2. Wrap http.js file [put it in untils file]

import axios from 'axios' import qs from 'qs' import Vue from 'vue' let vm = new Vue() let baseURL axios.defaults.timeout = 5000; / / response time axios. Defaults. Headers. Post [' the content-type '] = 'application/json; If (process.env.node_env == "production") {if (ACTIVE_ENV_CONFIG === 'test') {baseURL=' XXX '} Elseif (ACTIVE_ENV_CONFIG === 'prod') {baseURL=' XXX '} elseif (ACTIVE_ENV_CONFIG === 'prod') {baseURL=' XXX '} elseif (ACTIVE_ENV_CONFIG === 'prod') {baseURL=' XXX '} elseif (ACTIVE_ENV_CONFIG === 'prod') { BaseURL =' XXX '} axios.defaults.baseURL = baseURL //POST pass-through serialization (add request interceptor) Axios. Interceptors. Request. Use ((config) = > {/ / config. Before sending a request to do something validateStatus = function (status) {/ / return to return a status code status >= 200 && status < 300 } return config; }, (error) => {// console.log(' error ') return promise.reject (error); }); / / return status determine response interceptor (add) axios. Interceptors. Response. Use ((res) = > {/ / here can be treated according to their own company interface return return res}, (error) => { return Promise.reject(error); }); Export function fetchPost(url, params) {return new Promise((resolve, resolve)); reject) => { axios.post(url, params) .then(response => { resolve(response); }, err => { reject(err); }). Catch ((error) => {//console.log(error) reject(error)})})} //// returns a Promise export function fetchGet(url,  param) { return new Promise((resolve, reject) => { axios.get(url, { params: param }) .then(response => { resolve(response); }, err => { // console.log(err) reject(err) }) .catch((error) => { // console.log(error) reject(error) }) }) } Export function fetchPut(url, params) {return new Promise((resolve, reject) => {axios.put(url, params) .then(response => { resolve(response); }, err => { // console.log(err) reject(err); }).catch((error) => {// console.log(error) reject(error)})})} // Return a Promise(send delete request) export function fetchDelete(url, params) { return new Promise((resolve, reject) => { axios.delete(url, { params: params }) .then(response => { resolve(response); }, err => { // console.log(err) reject(err); }) .catch((error) => { // console.log(error) reject(error) }) }) } export default { fetchPost, fetchGet, fetchPut, fetchDelete }Copy the code

3. Global import [main.js]

import http from '@/utils/http'

Vue.prototype.$http = http
Copy the code

Use 4.

FetchGet: this.$http.fetchGet

FetchPost: this.$http.fetchPost

FetchPut request: this.$http.fetchPut

FetchDelete request: this.$http.fetchDelete

eg:

this.$http.fetchPost(`/api/v2/resource/image`, { resource_id: this.data.mediaUri, width: 0, height: 0}). Then (res => {// interface return data processing})Copy the code

5. The proxy agent/config/index. Js

Just add the proxy object in the following file

module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { proxy: {// match to/API, proxy to XXXX address '/ API ': {target: 'XXXX ', changeOrigin: true, pathRewrite: {'^/ API ': '/api' } } }, }, // Various Dev Server settings host: '0.0.0.0', //localhost// can be overwritten by process.env.host port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined autoOpenBrowser: false, errorOverlay: true, notifyOnErrors: true, poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- /** * Source Maps */ // https://webpack.js.org/configuration/devtool/#development devtool: 'cheap-module-eval-source-map', // If you have problems debugging vue-files in devtools, // set this to false - it *may* help // https://vue-loader.vuejs.org/en/options.html#cachebusting cacheBusting: true, cssSourceMap: true }, build: { // Template for index.html index: path.resolve(__dirname, '.. /dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '.. /dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', /** * Source Maps */ productionSourceMap: false, // https://webpack.js.org/configuration/devtool/#production devtool: '#source-map', // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: false, productionGzipExtensions: ['js', 'css'], // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or off bundleAnalyzerReport: process.env.npm_config_report } }Copy the code