axios封装和api接口请求

一，首先要封装axios要先下载axios

npm i axios -S

二，目录创建

在项目的src目录中，新建一个文件夹,作为我们的网络请求模块，然后在里面新建一个api.js文件和一个http.js。

http.js文件用来封装我们的axios，api.js用来统一管理我们的接口url

三， 在http.js中引入axios（使用什么组件要提前下载并且引入）

import axios from 'axios'; // 引入axios

import router from '../router';

// vant的toast提示框组件，大家可根据自己的ui组件更改。

import { Toast } from 'vant'; 

//element-ui 的loging，和信息提示

import {Loading, Message} from 'element-ui'

四，创建axios实例

const service = axios.create({
  baseURL: baseUrl, // url = base api url + request url
  withCredentials: false, // send cookies when cross-domain requests
  timeout: 1000*12 // 请求超时
})

五，post请求头的设置

post请求的时候，我们需要加上一个请求头，所以可以在这里进行一个默认的设置，即设置post的请求头为application/x-www-form-urlencoded;charset=UTF-8

service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

六，请求拦截

service.interceptors.request.use(
  function(config) {
    Vue.$loading.show();
    if (store.state.token) {