为什么要使用axios

功能特点：

支持发送ajax异步

支持在NodeJs中发送ajax请求。

支持Promise

支持拦截器请求和响应

支持对请求和响应数据的转换。

快速上手

安装：npm install axios --save或者使用cdn

data.json和demo1.html在同一个文件夹下

data.json

{
  "name": "Java",
  "url": "https://www.baidu.com",
  "page":1,
  "isOK":true,
  "address": {
    "sheng": "广东",
    "shi":"深圳"
  },
  "links": [
    {
      "name": "name1",
      "url": "url1"
    },
    {
      "name": "name2",
      "url": "url2"
    }
  ]
}

demo1.html

v-cloak解决网页刚加载会出现{{info.name}}这种的，让网页是白的
mounted 编译好的HTML挂载到页面完成后执行的事件钩子，这个钩子函数一般会做一些ajax请求获取数据，进行数据初始化
response=>(console.log(this.info=response.data)需要改成ES6，不然会出现表达式异常
data()方法接受mounted的返回值

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak]{
            display:none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <div>{{info.name}}</div>
    <div>{{info.address.shi}}</div>
    <a v-bind:href="info.url">百度</a>
</div>
</body>
<--引入axios的cdn--></--引入axios的cdn-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data(){
            //请求的返回参数要和json字符串一样
            return{
                info:{
                    name:null,
                    address:{
                        sheng:null,
                        shi:null
                    },
                    url:null
                }
            }
        },
        mounted(){
            axios.get('data.json').then(response=>(console.log(this.info=response.data)))
        }
    });
</script>
</html>

Promise回调例子

new Promise((resolve, reject) => {
        setTimeout(()=>{
          resolve('HelloWorld')
        }, 1000)
      }).then(data => {
        console.log(data)
        return Promise.resolve(data + '111')
      }).then(data => {
        console.log(data)
        return Promise.resolve(data + '222')
      }).then(data => {
        console.log(data)
      })

封装axios

在src下面创建一个utils目录，在里面创建一个request.js

import axios from 'axios'
// 创建axios
const service = axios.create({
  baseURL: 'http://localhost:8080/api',
  timeout: 10000
})
// 设置axios请求拦截器
// 拦截器中，可以对请求进行一些统一化的操作
service.interceptors.request.use(
  config => {
    // 统一设置请求头
    config.headers['token'] = '12345'
    console.log('config:', config)
    return config
  },
  err => {
    return Promise.reject('请求异常！')
  }
)
// 设置响应拦截器
service.interceptors.response.use(
  response => {
    let res = response.data
    const code = res.code
    if(code === 200) {
      return res
    }else {
      alert('请求失败！')
      return Promise.reject('请求异常！')
    }
  },
  err => {
    alert('请求失败！')
    return Promise.reject('请求异常！')
  }
)
// 把service导出
export default service

使用

在src下面创建一个api目录。在api目录下，根据模块去创建对应的js文件，文件中内容如下。

// 引入刚刚封装的request
import request from '@/utils/request'
const group_name = 'department'
// 创建一个对象，用于封装请求api
let data = {
  getDepartmentList() {
    // 返回一个request
    return new request({
      url: `/${group_name}/departmentList`,
      method: 'get'
    })
  },
  getDepartmentList2() {
    // 返回一个request
    return new request({
      url: `/${group_name}/departmentList`,
      method: 'get'
    })
  },
}
// 导出
export default data

在组件中使用。

import departmentApi from "@/api/department";
    getDepartment() {
      departmentApi.getDepartmentList().then(res => {
        console.log('返回数据：',res);
      });
    }