前言

前后端数据交互中，我们使用最多的就是jQuey中的ajax进行数据交互，但是随着大前端日益的扩大，越来越多的库和框架也渐渐的出现在前端开发人员面前，而本编博客需要介绍的就是在vue-cli项目中使用另一个库代替jQuey中的ajax，那就是axios，Vue更新到2.0之后宣告不再对vue-resource更新，推荐使用axios，axios是一个用于客户端与服务器通信的组件，axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端javaScript工具。通俗来说可以实现客户端请求服务器端提供的服务获得数据。

本章目标

学会使用axios中的相关内容

axios简介

特点

从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF

浏览器兼容性

依赖办法

nmp依赖方法

$ npm install axios

$ cnpm install axios //taobao

yarn依赖方法

$ yarn add axios

cdn依赖方法

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios资源：https://github.com/axios/axios

项目搭建

为了方便和使用axios，我们这里需要使用后台，在这里后台我使用的是ssm框架，不会搭建的园友可以查看我的这篇博客浅谈IDEA集成SSM框架(SpringMVC+Spring+MyBatis),这篇博客写的真是非常详细，博主良心推荐，包教包会，全网最好，没有之一。那么开始搭建项目吧！

数据库

sql脚本

create table book(

    bid int auto_increment primary key not null COMMENT'图书编号',

    bname varchar(50) not null COMMENT'图书名称',

    bauthor VARCHAR(50) COMMENT'图书作者'

)

INSERT into book(bname,bauthor)VALUES

('斗罗大陆','唐家三少'),

('假如给我三天光明','海伦凯勒'),

('斗破苍穹','天蚕土豆'),

('雪鹰领主','我吃西红柿')

SELECT * from book

后台

后台的话我就提供一些比较重要的部分，因为搭建好这整个项目之后，你就知道那些部分是重要，整体的项目结构如下：

我这里使用的是一个练习的，主要是搭建ssm项目非常的消耗时间，所以就是用以前搭建好的，我会将重要的文件抽取出来，提供给搭建使用

(1)Erp_Common下有一个通用返回消息的类R

R.java

package com.erp.common;

import java.util.HashMap;

import java.util.Map;

/**

 * 返回数据封装

 */

public class R extends HashMap<String, Object> {

    private static final long serialVersionUID = 1L;

    public R() {

        put("code", 1);

        put("msg", "success");

    }

    //错误时

    public static R error() {

        return error(500, "未知异常，请联系管理员");

    }

    public static R error(String msg) {

        return error(500, msg);

    }

    public static R error(int code, String msg) {

        R r = new R();

        r.put("code", code);

        r.put("msg", msg);

        return r;

    }

    //成功时

    public static R ok(String msg) {

        R r = new R();

        r.put("msg", msg);

        return r;

    }

    public static R ok(Map<String, Object> map) {

        R r = new R();

        r.putAll(map);

        return r;

    }

    public static R ok() {

        return new R();

    }

    public static R ok(Object data) {

        return new R().put("data",data);

    }

    @Override

    public R put(String key, Object value) {

        super.put(key, value);

        return this;

    }

}

(2)Erp_Dao模块下的BookDao，BookMapper.xml，applicationContext.xml，db.properties，mybatis.xml，ErpDaoTest

BookDao

package com.erp.dao;

import com.erp.entities.Book;

import java.util.List;

public interface BookDao {

    //查询全部图书

    List<Book> getAllBook();

    //添加图书

    boolean addBook(Book book);

    //修改图书

    boolean updateBook(Book book);

    //删除图书

    boolean deleteBook(int bid);

    //更据编号查询图书信息

    Book getBookById(int bid);

}

BookMapper.xml

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<!--命名空间应该是对应接口的包名+接口名 -->

<mapper namespace="com.erp.dao.BookDao">

    <!--查询全部图书-->

    <select id="getAllBook" resultMap="bookMap">

        select  bid,bname,bauthor from book

    </select>

    <!--根据编号查询图书信息-->

    <select id="getBookById" resultType="book">

        select bid,bname,bauthor from  book where bid=#{id}

    </select>

    <!--添加图书-->

    <insert id="addBook" parameterType="book">

      insert  into book(bname, bauthor)

      values (#{bname},#{bauthor})

    </insert>

    <!--修改图书信息-->

    <update id="updateBook" parameterType="book">

      update book set bname=#{bname},bauthor=#{bauthor} where bid=#{bid}

    </update>

    <!--删除图书信息-->

    <delete id="deleteBook" parameterType="int">

      delete  from book where  bid=#{bid}

    </delete>

    <resultMap id="bookMap" type="book">

        <id property="bid" column="bid"/>

        <result column="bname" property="bname"/>

        <result property="bauthor" column="bauthor"/>

    </resultMap>

</mapper>

applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>

<beans xmlns="http://www.springframework.org/schema/beans"

    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    xmlns:p="http://www.springframework.org/schema/p"

    xmlns:aop="http://www.springframework.org/schema/aop"

    xmlns:context="http://www.springframework.org/schema/context"

    xmlns:tx="http://www.springframework.org/schema/tx"

    xsi:schemaLocation="http://www.springframework.org/schema/beans

        http://www.springframework.org/schema/beans/spring-beans-4.3.xsd

        http://www.springframework.org/schema/context

        http://www.springframework.org/schema/context/spring-context-4.3.xsd

        http://www.springframework.org/schema/aop

        http://www.springframework.org/schema/aop/spring-aop-4.3.xsd

        http://www.springframework.org/schema/tx

        http://www.springframework.org/schema/tx/spring-tx-4.3.xsd">

    <!--1 引入属性文件，在配置中占位使用 -->

    <context:property-placeholder location="classpath*:db.properties" />

    <!--2 配置C3P0数据源 -->

    <bean id="datasource" class="com.mchange.v2.c3p0.ComboPooledDataSource"

        destroy-method="close">

        <!--驱动类名 -->

        <property name="driverClass" value="${mysql.driver}" />

        <!-- url -->

        <property name="jdbcUrl" value="${mysql.url}" />

        <!-- 用户名 -->

        <property name="user" value="${mysql.uid}" />

        <!-- 密码 -->

        <property name="password" value="${mysql.password}" />

        <!-- 当连接池中的连接耗尽的时候c3p0一次同时获取的连接数 -->

        <property name="acquireIncrement" value="${mysql.acquireIncrement}"></property>

        <!-- 初始连接池大小 -->

        <property name="initialPoolSize" value="${mysql.initialPoolSize}"></property>

        <!-- 连接池中连接最小个数 -->

        <property name="minPoolSize" value="${mysql.minPoolSize}"></property>

        <!-- 连接池中连接最大个数 -->

        <property name="maxPoolSize" value="${mysql.maxPoolSize}"></property>

    </bean>

    <!--3 会话工厂bean sqlSessionFactoryBean -->

    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">

        <!-- mybatis核心配置文件路径 -->

        <property name="configLocation" value="classpath:mybatis.xml"></property>

        <!-- 数据源 -->

        <property name="dataSource" ref="datasource"/>

        <!-- sql映射文件路径[mapper路径] -->

        <property name="mapperLocations" value="classpath*:mapper/*Mapper.xml"></property>

    </bean>

    <!--4 自动扫描对象关系映射 -->

    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">

        <!--指定会话工厂，如果当前上下文中只定义了一个则该属性可省去 -->

        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>

        <!-- 指定要自动扫描接口的基础包，实现接口 -->

        <property name="basePackage" value="com.erp.dao"/>

    </bean>

    <!--5 声明式事务管理 -->

    <!--定义事物管理器，由spring管理事务 -->

    <bean id="transactionManager"

        class="org.springframework.jdbc.datasource.DataSourceTransactionManager">

        <property name="dataSource" ref="datasource"></property>

    </bean>

    <!--支持注解驱动的事务管理，指定事务管理器 -->

    <tx:annotation-driven transaction-manager="transactionManager" />

    <!--6 容器自动扫描IOC组件 -->

    <context:component-scan base-package="com.erp"/>

    <!--7 aspectj支持自动代理实现AOP功能 -->

    <aop:aspectj-autoproxy/>

</beans>

db.properties

##mysql连接字符串

#驱动

mysql.driver=com.mysql.jdbc.Driver

#连接字符串

mysql.url=jdbc:mysql://localhost:3306/booksystem?useUnicode=true&amp;characterEncoding=UTF-8

#用户名

mysql.uid=root

#密码

mysql.password=123456

mysql.acquireIncrement=5

mysql.initialPoolSize=10

mysql.minPoolSize=5

mysql.maxPoolSize=20

mybatis.xml

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd">

<configuration>

    <properties resource="db.properties"></properties>

    <settings>

        <!--指定mybatis使用日志组件 -->

         <setting name="logImpl" value="STDOUT_LOGGING"/>

    </settings>

    <!--设置别名-->

    <typeAliases>

        <package name="com.erp.entities"/>

    </typeAliases>

</configuration>

ErpDaoTest

package com.erp.dao;

import com.erp.entities.Book;

import org.junit.Test;

import org.junit.runner.RunWith;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.test.annotation.Rollback;

import org.springframework.test.context.ContextConfiguration;

import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;

import org.springframework.transaction.annotation.Transactional;

import static org.junit.Assert.*;

//指定bean注入的配置文件

@ContextConfiguration("/applicationContext.xml")

//使用标准的junit

@RunWith(SpringJUnit4ClassRunner.class)

@Transactional    //事务管理

@Rollback(true) //是否回滚

public class ErpDaoTest {

    @Autowired

    private ErpDao erpDao;

    @Autowired

    private  BookDao bookDao;

    @Test

    public void getAll() {

//        System.out.println(bookDao.getAllBook());

        Book book=new Book(1,"你好","aa");

//        bookDao.updateBook(book);

        bookDao.getBookById(1);

    }

}

(3)Erp_Entity模块下的Book.java

Book.java

package com.erp.entities;

public class Book {

  private long bid;     //  图书编号

  private String bname; //  图书名称

  private String bauthor; //  图书作者

  public long getBid() {

    return bid;

  }

  public void setBid(long bid) {

    this.bid = bid;

  }

  public String getBname() {

    return bname;

  }

  public void setBname(String bname) {

    this.bname = bname;

  }

  public String getBauthor() {

    return bauthor;

  }

  public void setBauthor(String bauthor) {

    this.bauthor = bauthor;

  }

  //  无参构造方法

  public Book() {

  }

  //带参构造方法

  public Book(long bid, String bname, String bauthor) {

    this.bid = bid;

    this.bname = bname;

    this.bauthor = bauthor;

  }

  @Override

  public String toString() {

    return "Book{" +

            "bid=" + bid +

            ", bname='" + bname + '\'' +

            ", bauthor='" + bauthor + '\'' +

            '}';

  }

}

(4)Erp_Service模块下的BookService和BookImple

BookService

package com.erp.service;

import com.erp.entities.Book;

import java.util.List;

public interface BookService {

    //  查询全部图书信息

    List<Book> getAllBook();

    //  根据图书编号查询图书信息

    Book getBookById(int id);

    //添加图书

    boolean addBook(Book book);

    //修改图书

    boolean updateBook(Book book);

    //删除图书

    boolean deleteBook(int id);

}

BookImple

package com.erp.service.imple;

import com.erp.dao.BookDao;

import com.erp.entities.Book;

import com.erp.service.BookService;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

import java.util.List;

@Service

public class BookImple implements BookService {

    @Autowired

    private BookDao bookDao;

    public List<Book> getAllBook() {

        return bookDao.getAllBook();

    }

    public Book getBookById(int id) {

        return bookDao.getBookById(id);

    }

    public boolean addBook(Book book) {

        return bookDao.addBook(book);

    }

    public boolean updateBook(Book book) {

        return bookDao.updateBook(book);

    }

    public boolean deleteBook(int id) {

        return bookDao.deleteBook(id);

    }

}

(5)Erp_WebUi模块下的BookController，springmvc-servlet.xml，web.xml

BookController

package com.erp.controller;

import com.erp.common.R;

import com.erp.entities.Book;

import com.erp.service.BookService;

import org.apache.ibatis.annotations.Param;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.*;

@Controller

@RequestMapping("/book")

public class BookController {

    @Autowired

    private BookService bookService;

    //  查询全部图书信息

    @ResponseBody

    @RequestMapping("/getAllBook")

    public R getAllBook(){

        return  R.ok(bookService.getAllBook());

    }

    //  根据图书编号查询图书信息

    @ResponseBody

    @RequestMapping("/getBookById")

    public  R getBookById(@RequestParam("id") Integer id){

        try {

            return  R.ok(bookService.getBookById(id));

        }catch (Exception e){

            return  R.error("参数错误");

        }

    }

    //  添加图书

    @ResponseBody

    @PostMapping("/addBook")

    public  R addBook(@RequestParam("bname") String bname,@RequestParam("bauthor") String bauthor){

        try {

            Book book=new Book(0,bname,bauthor);

            return  R.ok(bookService.addBook(book));

        }catch (Exception e){

            return  R.error("参数错误");

        }

    }

    @ResponseBody

    @PutMapping("/updateBook")

    //  修改图书

    public  R updateBook(@RequestParam("bid") Integer bid,@RequestParam("bname") String bname,@RequestParam("bauthor") String bauthor){

        try {

            Book book=new Book(bid,bname,bauthor);

            return  R.ok(bookService.updateBook(book));

        }catch (Exception e){

            return  R.error("参数错误");

        }

    }

    //  删除图书

    @ResponseBody

    @DeleteMapping("/deleteBook")

    public  R deleteBook(@RequestParam("id") Integer id){

        try {

            return R.ok(bookService.deleteBook(id));

        }catch (Exception e){

            return  R.error("参数错误");

        }

    }

}

在这个控制器中我们使用的是Restful的风格来进行响应

springmvc-servlet.xml

<?xml version="1.0" encoding="UTF-8"?>

<beans xmlns="http://www.springframework.org/schema/beans"

       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"

       xmlns:mvc="http://www.springframework.org/schema/mvc"

       xsi:schemaLocation="http://www.springframework.org/schema/beans

         http://www.springframework.org/schema/beans/spring-beans.xsd

        http://www.springframework.org/schema/context

        http://www.springframework.org/schema/context/spring-context-4.3.xsd

        http://www.springframework.org/schema/mvc

        http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd">

    <!-- 自动扫描包，实现支持注解的IOC -->

    <context:component-scan base-package="com.erp" />

    <!-- Spring MVC不处理静态资源 -->

    <mvc:default-servlet-handler />

    <!-- 支持mvc注解驱动 -->

    <mvc:annotation-driven enable-matrix-variables="true" />

    <!-- 配置映射媒体类型的策略 -->

    <bean

            class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping">

        <property name="removeSemicolonContent" value="false" />

    </bean>

    <!-- 内部视图解析器，JSP与JSTL模板 -->

    <bean

            class="org.springframework.web.servlet.view.InternalResourceViewResolver"

            id="internalResourceViewResolver">

        <!--指定视图渲染类 -->

        <property name="viewClass"

                  value="org.springframework.web.servlet.view.JstlView" />

        <!--自动添加到路径中的前缀 -->

        <property name="prefix" value="/WEB-INF/views/" />

        <!--自动添加到路径中的后缀 -->

        <property name="suffix" value=".jsp" />

        <!--设置所有视图的内容类型，如果视图本身设置内容类型视图类可以忽略 -->

        <property name="contentType" value="text/html;charset=UTF-8" />

        <!-- 优先级，越小越前 -->

        <property name="order" value="1" />

    </bean>

        <!--文件上传解析器 -->

    <!--Spring MVC默认不能识别multipart格式的文件内容 -->

    <bean id="multipartResolver"

          class="org.springframework.web.multipart.support.StandardServletMultipartResolver">

    </bean>

    <mvc:cors>

        <mvc:mapping path="/**"

                     allowed-origins="*"

                     allowed-methods="POST,GET, OPTIONS,DELETE,PUT"

                     allowed-headers="Content-Type,ContentType,Access-Control-Allow-Headers, Authorization, X-Requested-With"

                     allow-credentials="true"/>

    </mvc:cors>

</beans>

web.xml

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

         xmlns="http://java.sun.com/xml/ns/javaee"

         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"

         id="WebApp_ID" version="3.0">

  <welcome-file-list>

    <welcome-file>index.html</welcome-file>

  </welcome-file-list>

  <listener>

    <description>Spring容器加载监听器</description>

    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>

  </listener>

  <context-param>

    <description>设置Spring加载时的配置文件位置，默认位置在WEB-INF/lib目录下</description>

    <param-name>contextConfigLocation</param-name>

    <param-value>classpath*:applicationContext.xml</param-value>

  </context-param>

  <!--Spring MVC 前置Servlet，中心控制器 -->

  <servlet>

    <servlet-name>springmvc</servlet-name>

    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

    <init-param>

      <param-name>contextConfigLocation</param-name>

      <!--Spring MVC配置文件路径 -->

      <param-value>classpath*:springmvc-servlet.xml</param-value>

    </init-param>

    <!-- 启动动优先级，越小越早加载 -->

    <load-on-startup>1</load-on-startup>

    <!--Servlet3.0以上文件上传配置 -->

    <multipart-config>

      <!--上传文件的最大限制5MB -->

      <max-file-size>5242880</max-file-size>

      <!--请求的最大限制20MB -->

      <max-request-size>20971520</max-request-size>

      <!--当文件的大小超过临界值时将写入磁盘 -->

      <file-size-threshold>0</file-size-threshold>

    </multipart-config>

  </servlet>

  <!-- Servlet访问的路径映射，所有的访问都必须经过调度用的前置控制品 -->

  <servlet-mapping>

    <servlet-name>springmvc</servlet-name>

    <url-pattern>/</url-pattern>

  </servlet-mapping>

  <!--编码过滤器 -->

  <filter>

    <filter-name>characterEncodingFilter</filter-name>

    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>

    <init-param>

      <param-name>encoding</param-name>

      <param-value>UTF-8</param-value>

    </init-param>

    <init-param>

      <param-name>forceEncoding</param-name>

      <param-value>true</param-value>

    </init-param>

  </filter>

  <!-- 路径映射 -->

  <filter-mapping>

    <filter-name>characterEncodingFilter</filter-name>

    <url-pattern>/*</url-pattern>

  </filter-mapping>

</web-app>

整体的后台已经搭建完成了，现在就是在前端使用axios来请求数据和处理数据了

axios的请求方式

在编写前端代码之前我们需要了解axios的一些请求方式

1.基本请求方式

axios.request（config）

axios.get（url [，config]）

axios.delete（url [，config]）

axios.head（url [，config]）

axios.post（url [，data [，config]]）

axios.put（url [，data [，config]]）

axios.patch（url [，data [，config]]）

注意当使用别名方法时，不需要在config中指定url，method和data属性。

2.并发请求

axios.all（iterable）

axios.spread（callback）

3.请求配置

{

// `url`是将用于请求的服务器URL

url: '/user',

// `method`是发出请求时使用的请求方法

method: 'get', // 默认

// `baseURL`将被添加到`url`前面，除非`url`是绝对的。

// 可以方便地为 axios 的实例设置`baseURL`，以便将相对 URL 传递给该实例的方法。

baseURL: 'https://some-domain.com/api/',

// `transformRequest`允许在请求数据发送到服务器之前对其进行更改

// 这只适用于请求方法'PUT'，'POST'和'PATCH'

// 数组中的最后一个函数必须返回一个字符串，一个 ArrayBuffer或一个 Stream

transformRequest: [function (data) {

// 做任何你想要的数据转换

return data;

}],

// `transformResponse`允许在 then / catch之前对响应数据进行更改

transformResponse: [function (data) {

// Do whatever you want to transform the data

return data;

}],

// `headers`是要发送的自定义 headers

headers: {'X-Requested-With': 'XMLHttpRequest'},

// `params`是要与请求一起发送的URL参数

// 必须是纯对象或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

// - Browser only: FormData, File, Blob

// - Node only: Stream

data: {

firstName: 'Fred'

},

// `timeout`指定请求超时之前的毫秒数。

// 如果请求的时间超过'timeout'，请求将被中止。

timeout: 1000,

// `withCredentials`指示是否跨站点访问控制请求

// should be made using credentials

withCredentials: false, // default

// `adapter'允许自定义处理请求，这使得测试更容易。

// 返回一个promise并提供一个有效的响应（参见[response docs]（＃response-api））

adapter: function (config) {

/* ... */

},

// `auth'表示应该使用 HTTP 基本认证，并提供凭据。

// 这将设置一个`Authorization'头，覆盖任何现有的`Authorization'自定义头，使用`headers`设置。

auth: {

username: 'janedoe',

password: 's00pers3cret'

},

// “responseType”表示服务器将响应的数据类型

// 包括 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'

responseType: 'json', // default

//`xsrfCookieName`是要用作 xsrf 令牌的值的cookie的名称

xsrfCookieName: 'XSRF-TOKEN', // default

// `xsrfHeaderName`是携带xsrf令牌值的http头的名称

xsrfHeaderName: 'X-XSRF-TOKEN', // default

// `onUploadProgress`允许处理上传的进度事件

onUploadProgress: function (progressEvent) {

// 使用本地 progress 事件做任何你想要做的

},

// `onDownloadProgress`允许处理下载的进度事件

onDownloadProgress: function (progressEvent) {

// Do whatever you want with the native progress event

},

// `maxContentLength`定义允许的http响应内容的最大大小

maxContentLength: 2000,

// `validateStatus`定义是否解析或拒绝给定的promise

// HTTP响应状态码。如果`validateStatus`返回`true`（或被设置为`null` promise将被解析;否则，promise将被

// 拒绝。

validateStatus: function (status) {

return status >= 200 && status < 300; // default

},

// `maxRedirects`定义在node.js中要遵循的重定向的最大数量。

// 如果设置为0，则不会遵循重定向。

maxRedirects: 5, // 默认

// `httpAgent`和`httpsAgent`用于定义在node.js中分别执行http和https请求时使用的自定义代理。

// 允许配置类似`keepAlive`的选项，

// 默认情况下不启用。

httpAgent: new http.Agent({ keepAlive: true }),

httpsAgent: new https.Agent({ keepAlive: true }),

// 'proxy'定义代理服务器的主机名和端口

// `auth`表示HTTP Basic auth应该用于连接到代理，并提供credentials。

// 这将设置一个`Proxy-Authorization` header，覆盖任何使用`headers`设置的现有的`Proxy-Authorization` 自定义 headers。

proxy: {

host: '127.0.0.1',

port: 9000,

auth: : {

username: 'mikeymike',

password: 'rapunz3l'

}

},

// “cancelToken”指定可用于取消请求的取消令牌

// (see Cancellation section below for details)

cancelToken: new CancelToken(function (cancel) {

})

}

4. 响应模式

请求的响应包含以下信息

{

  // `data` is the response that was provided by the server

  data: {},

  // `status` is the HTTP status code from the server response

  status: 200,

  // `statusText` is the HTTP status message from the server response

  statusText: 'OK',

  // `headers` the headers that the server responded with

  // All header names are lower cased

  headers: {},

  // `config` is the config that was provided to `axios` for the request

  config: {},

  // `request` is the request that generated this response

  // It is the last ClientRequest instance in node.js (in redirects)

  // and an XMLHttpRequest instance in the browser

  request: {}

}

使用时then，您将收到如下响应

axios.get('/user/12345')

.then(function(response) {

　　console.log(response.data);

　　console.log(response.status);

　　console.log(response.statusText);

　　console.log(response.headers);

　　console.log(response.config);

});

5.配置默认值

您可以指定将应用于每个请求的配置默认值

5.1全局axios默认值

axios.defaults.baseURL = 'https://api.example.com';

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

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

5.2自定义实例默认值

//在创建实例时设置配置默认值

var instance = axios.create（{

　　baseURL：'https://api.example.com'

}）;

//在实例创建后改变默认值

instance.defaults.headers.common ['Authorization'] = AUTH_TOKEN;

6.配置优先级顺序

配置将与优先顺序合并。顺序是lib / defaults.js中的库默认值，然后是实例的defaults属性，最后是请求的config参数。后者将优先于前者。这里有一个例子

//使用库提供的配置默认值创建实例

//此时，超时配置值为`0`，这是库的默认值

var instance = axios.create（）;

//覆盖库的超时默认值

//现在所有请求将在超时前等待2.5秒

instance.defaults.timeout = 2500;

//覆盖此请求的超时，因为它知道需要很长时间

instance.get（'/ longRequest'，{

timeout：5000

}）

前端

普通界面版

1.处理get请求

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>axios处理GET请求</title>

</head>

<body>

  <div id="app">

      <button @click="getAllBook">获取全部的图书</button>

  </div>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <script>

    const vm=new Vue({

      el:'#app',

      data:{

        baseUrl:"http://localhost:8088/book/"

      },

      methods:{

        getAllBook(){

          //方式一

          // axios.get(this.baseUrl+'getAllBook').then((response)=>{

          //   console.log(response);

          // })

          //方式二

          axios({

            url:this.baseUrl+'getAllBook',

            method:"GET",

          }).then((response)=>{

            console.log(response);

          })

        }

      }

    })

  </script>

</body>

</html>

结果：

2.处理post请求

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>axios处理POST请求</title>

</head>

<body>

  <div id="app">

      <button @click="addBook">添加书籍</button>

  </div>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <script>

    const vm=new Vue({

      el:'#app',

      data:{

        baseUrl:'http://localhost:8088/book/'

      },

      methods:{

        addBook(){

          axios({

            url:this.baseUrl+'addBook',

            method:'POST',

            params:{

                   bname:'vue从入门到进阶',

                   bauthor:'一只流浪的kk'

            }

          }).then((response)=>{

            console.log(response);

          })

        }

      }

    })

  </script>

</body>

</html>

结果：

3.处理put请求

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>axios处理PUT请求</title>

</head>

<body>

  <div id="app">

      <button @click="updateBook">修改图书信息</button>

  </div>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <script>

    const vm=new Vue({

      el:'#app',

      data:{

        baseUrl:'http://localhost:8088/book/'

      },

      methods:{

        updateBook(){

          axios({

            url:this.baseUrl+'updateBook',

            method:'PUT',

            params:{

              bid:5,

              bname:'java从入门到精通',

              bauthor:'中本聪'

            }

          }).then((response)=>{

            console.log(response);

          })

        }

      }

    })

  </script>

</body>

</html>

结果：

4.处理delete请求

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>axios处理DELETE请求</title>

</head>

<body>

  <div id="app">

    <button @click="deleteBook">删除图书信息</button>

  </div>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <script>

    const vm=new Vue({

      el:'#app',

      data:{

        baseUrl:'http://localhost:8088/book/'

      },

      methods:{

        deleteBook(){

          axios({

            url:this.baseUrl+'deleteBook',

            method:'DELETE',

            params:{

              id:5

            }

          }).then((response)=>{

            console.log(response);

          })

        }

      }

    })

  </script>

</body>

</html>

结果：

5.处理多个请求

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>axios处理多个请求</title>

</head>

<body>

  <div id="app">

    <button @click="getBookById">查询多本图书信息</button>

  </div>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <script>

    const vm=new Vue({

      el:'#app',

      data:{

        baseUrl:'http://localhost:8088/book/'

      },

      methods:{

        getBookById(){

          const that=this;

          const getBookOne=function () {

            return axios({

              url:that.baseUrl+'getBookById',

              method:'GET',

              params:{

                id:1

              }

            });

          }

          const getBookTwo=function () {

            return axios({

                url:that.baseUrl+'getBookById',

                method:'GET',

                params:{

                  id:2

                }

            })

          }

          axios.all([getBookOne(),getBookTwo()]).then(axios.spread(function (data1,data2) {

            console.log(data1);

            console.log(data2);

          }))

        }

      }

    })

  </script>

</body>

</html>

结果：

巴特西

vue-cli项目中使用axios

前言

本章目标

axios简介

特点

浏览器兼容性

依赖办法

nmp依赖方法

yarn依赖方法

cdn依赖方法

项目搭建

数据库

后台

(1)Erp_Common下有一个通用返回消息的类R

(2)Erp_Dao模块下的BookDao，BookMapper.xml，applicationContext.xml，db.properties，mybatis.xml，ErpDaoTest

(3)Erp_Entity模块下的Book.java

(4)Erp_Service模块下的BookService和BookImple

(5)Erp_WebUi模块下的BookController，springmvc-servlet.xml，web.xml

axios的请求方式

1.基本请求方式

2.并发请求

3.请求配置

4. 响应模式

5.配置默认值

5.1全局axios默认值

5.2自定义实例默认值

6.配置优先级顺序

前端

普通界面版

1.处理get请求

结果：

2.处理post请求

3.处理put请求

4.处理delete请求

5.处理多个请求

最新文章

热门文章