Vue+axios

简介

axios基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 node.js 中使用.详情可以参考官网。

常规使用

request.js

import axios from 'axios'
// import store from '@/store'

// 创建axios实例
const service = axios.create({
    baseURL: '',
    timeout: 15000 // 请求超时时间
})


// http request 请求拦截器，有token值则配置上token值
// service.interceptors.request.use(
//     config => {
//         if (token) {  // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
//             config.headers.Authorization = token;
//         }
//         return config;
//     },
//     err => {
//         return Promise.reject(err);
// });

service.interceptors.response.use(
    function (response) {
        //请求正常则返回
        return Promise.resolve(response)
    },
    function (error) {
        // 请求错误则向store commit这个状态变化
        // const httpError = {
        //     hasError: true,
        //     status: error.response.status,
        //     statusText: error.response.statusText
        // }
        // store.commit('ON_HTTP_ERROR', httpError)
        return Promise.reject(error)
    }
)

export default service

新建一个api目录下login.js

import request from '@/utils/request'

export function getTest(params) {
    return request({
        url: '/u/register',
        method: 'get',
        params
    })
}

在登录组件login.vue中调用

import { getTest } from "@/api/login";


 methods: {
    handleLogin() {
      getTest(this.userame).then(response => {
           alert(response.data);
           this.$store.dispatch('increment')
      })
    }
  }

一些坑

跨域问题、post表单提交问题 ==> 推荐这位大哥总结得还是不错的。