Axios

axios

axios是什么

• 易用、简洁且高效的http库

• Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

特性

• 从浏览器中创建 XMLHttpRequests

• 从 node.js 创建 http 请求

• 支持 Promise API

• 拦截请求和响应

• 转换请求数据和响应数据

• 取消请求

• 自动转换 JSON 数据

• 客户端支持防御 XSRF

安装

npm install axios

引用

全局引用

1. 在main.js中引入

//引入axios
import axios from 'axios';
Vue.prototype.$axios = axios;

1. 在login.vue中调用

this.$axios.get('url')

局部引用

1. 在script中：import axios from 'axios'

2. 在methods中：axios.get('url')

请求

axios.get('url',{
        params:{id:1,name:'zs'}
        })
        .then(response => {
          console.log(response.data);
          console.log(response.status);
          console.log(response.statusText);
          console.log(response.headers);
          console.log(response.config);
        }).catch(function(error) {
            if (error.response) {
                console.log("收到服器响应信息")
                console.log(error.response.data);
                console.log(error.response.status);
                console.log(error.response.headers);
              } else if (error.request) {
                console.log("错误的请求")
                console.log(error.request);
              } else {
                console.log('Error', error.message);
              }
              console.log(error.config);
        });

服器充许跨域请求

1. 创建CrossFilter

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
​
/**
 * 充许跨域请求
 */
public class CrossFilter implements Filter {
​
    private boolean isCross = false;
​
    @Override
    public void destroy() {
        isCross = false;
    }
​
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        HttpServletRequest req = (HttpServletRequest) request;
        HttpServletResponse res = (HttpServletResponse) response;
        System.out.println("拦截请求: " + req.getHeader("Origin"));
        if (isCross) {
            //允许任意domain访问
            res.setHeader("Access-Control-Allow-Origin", "*");
            res.setHeader("Access-Control-Allow-Credentials", "true");
            //allow-headers为*,允许所有的请求头
            res.setHeader("Access-Control-Allow-Headers",
                    "Accept,Accept-Encoding,Accept-Language,Connection,Content-Length,Content-Type, Cookie,Host,Origin,Referer,User-Agent, Authorization,X-Requested-With,OsType");
            //充许请求方式
            res.setHeader("Access-Control-Allow-Methods", "POST,GET, HEAD,PUT, DELETE, TRACE, OPTIONS");
        }
        if ("OPTIONS".equalsIgnoreCase(req.getMethod())) {
            response.getOutputStream().close();
        } else {
            chain.doFilter(req, res);
        }
    }
​
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        String isCrossStr = filterConfig.getInitParameter("IsCross");
        isCross = isCrossStr.equals("true") ? true : false;
    }
​
}
​

1. 在web.xml文件中部署

<!-- 跨域请求 -->
    <filter>
        <filter-name>CrossFilter</filter-name>
        <filter-class>com.zking.ssm.filter.CrossFilter</filter-class>
        <init-param>
            <param-name>IsCross</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CrossFilter</filter-name>
        <url-pattern>/api/*</url-pattern>
    </filter-mapping>

1. 浏览器封装请求，向服器询问是可以跨域请求；请求中携带了Origin参数，其值发出请求的源地址

2. 服器收到请求之后，在响应流的头部添加了充许跨域请求的信息，并将内容响应给客户端

3. 浏览器收到服器响应信息之后，浏览器根据是否充许跨域请求,做出相应的处理；如果不充许，浏览器报错；

   如果充许，浏览器再一次发送请求

4. 服器充许请求资源