vue 异步网络请求 axios 【实用教程】（含访问本地接口）

cnpm i axios --save-dev

import axios from 'axios'
 
// axios 全局默认值
axios.defaults.baseURL = '/';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
 
// 添加请求拦截器
axios.interceptors.request.use(function(config) {
 
    // 无需带token的请求路径，正则校验（/public 和 /login 开头的api 无需token ）
    let publicPath = [/^\/public/, /^\/login/]
        // 是否是公开接口（公开接口无需token）
    let isPublic = false
        // 判断当前api是否是公开接口
    publicPath.map((path) => {
            isPublic = isPublic || path.test(config.url)
        })
        // 从sessionStorage中获取token
    const token = sessionStorage.getItem('token')
    if (!isPublic && token) {
        // 若当前api不是公开接口，并且token存在，则向headers中添加token
        config.headers.Authorization = 'Bearer ' + token
    }
 
 
    // 对get请求的参数全部进行URL编码
    let url = config.url
 
    if (config.method === 'get' && config.params) {
        url += '?'
        let keys = Object.keys(config.params)
        for (let key of keys) {
            url += `${key}=${encodeURIComponent(config.params[key])}&`
        }
        url = url.substring(0, url.length - 1)
        config.params = {}
    }
    config.url = url
 
    return config;
}, function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
 
// 添加响应拦截器
axios.interceptors.response.use(function(response) {
    // 对响应数据做点什么
    return response;
}, function(error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

// 插件——异步请求 axios
import axios from 'axios'
import './axios.js' 
Vue.prototype.$http = axios

this.$http({
    method: 'get',
    url: 'http://jsonplaceholder.typicode.com/users',
    params: {
        id: 1
    }
}).then(res => {
            this.user1 = res.data;
})

// 无参数            
this.$http.get("http://jsonplaceholder.typicode.com/users").then(res => {
    this.users = res.data;
})
 
// 默认请求方法为get
this.$http("http://jsonplaceholder.typicode.com/users?id=1").then(res => {
       this.user1 = res.data;
})
 
this.$http.get("http://jsonplaceholder.typicode.com/users?id=1").then(res=> {
      this.user1 = res.data;
})
 
this.$http.get("http://jsonplaceholder.typicode.com/users", {
                params: {
                    id: 2
                }
            }).then(res => {
                 this.user = res.data;
            })

this.$http({
    method: 'post',
    url: 'https://jsonplaceholder.typicode.com/posts',
    data: {
        name: '朝阳',
        sex: '男'
    }
}).then(res=> {
    this.$message.success(res.msg)
})

this.$http.post("https://jsonplaceholder.typicode.com/posts",{
                    name: '朝阳',
                    sex: '男'
}).then(res => {
     this.$message.success(res.msg)
})

function getUserAccount() {
  return this.$http.get('/user/12345');
}
 
function getUserPermissions() {
  return this.$http.get('/user/12345/permissions');
}
 
this.$http.all([getUserAccount(), getUserPermissions()])
  .then(this.$http.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

this.$http({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream'
})
  .then(function(response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});

{
   // `url` 是用于请求的服务器 URL
  url: '/user',
 
  // `method` 是创建请求时使用的方法
  method: 'get', // default
 
  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',
 
 
  // `headers` 是即将被发送的自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},
 
  // `params` 是即将与请求一起发送的 URL 参数
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  params: {
    ID: 12345
  },
 
   // `paramsSerializer` 是一个负责 `params` 序列化的函数
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },
 
  // `data` 是作为请求主体被发送的数据
  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  // 在没有设置 `transformRequest` 时，必须是以下类型之一：
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属：FormData, File, Blob
  // - Node 专属： Stream
  data: {
    firstName: 'Fred'
  },
 
  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求话费了超过 `timeout` 的时间，请求将被中断
  timeout: 1000,
 
   // `withCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials: false, // default
 
 
 // `auth` 表示应该使用 HTTP 基础验证，并提供凭据
  // 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },
 
   // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // default
 
  // `responseEncoding` indicates encoding to use for decoding responses
  // Note: Ignored for `responseType` of 'stream' or client-side requests
  responseEncoding: 'utf8', // default
 
   // `maxContentLength` 定义允许的响应内容的最大尺寸
  maxContentLength: 2000,
 
  // 'proxy' 定义代理服务器的主机名称和端口
  // `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
  // 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },
 
}

      this.$http.get("/myAPI/user").then((res) => {
        console.log(res.data);
      });

// 后端服务器地址
let url = "http://localhost:3000/api/";
 
module.exports = {
  publicPath: "./", // 【必要】静态文件使用相对路径
  outputDir: "./dist", //打包后的文件夹名字及路径
  devServer: {
    // 开发环境跨域情况的代理配置
    proxy: {
      // 【必要】访问自己搭建的后端服务器
      "/myAPI": {
        target: url,
        changOrigin: true,
        ws: true,
        secure: false,
        pathRewrite: {
          "^/myAPI": "/",
        },
      },
    },
  },
};