Axios使用总结

Posted 2020-12-12 wu-yan-wen

软工实践个人技术总结

技术概述

Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中，主要作用为用于向后台发起请求的，还有在请求中做更多是可控功能。自从vue2.0之后，就不再对vue-resource更新，而是推荐使用axios

技术详述

使用方法

• 在安装完成VUE后安装Axios

npm install --save axios vue-axios

• 从VUE框架中引入Axios，以便使用Axios的函数

import Vue from ‘vue‘;
import axios from ‘axios‘;
import VueAxios from ‘vue-axios‘;
Vue.use(VueAxios,axios);

• Axios具体使用

//Axios的get请求的具体操作
this.axios.get(‘/test‘      //此处为请求的地址具体处理的界面
, {
    params: {
      属性名: 值，
      属性名: 值
    }      //此处为传递的参数，使用params
  })
  .then(function (response) {
    console.log(response);
  })     //请求成功所执行的方法
  .catch(function (error) {
    console.log(error);
  });       //请求失败所执行的方法


//Axios的post请求  与上面类似
this.axios.post(‘/user‘, {
        firstName: ‘Fred‘,
        lastName: ‘Flintstone‘
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });


//以及其他常用的方法
3.axios.request(config)
 
4.axios.head(url[, config])
 
5.axios.delete(url[, config])
 
6.axios.put(url[, data[, config]])
 
7.axios.patch(url[, data[, config]])
 
8.axios.all(iterable)执行多个并发请求      

使用困难

在使用Axios时经常会遇见跨域问腿，而跨域指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制，通俗的来说就是a页面想要获取b页面资源，如果a,b页面的协议、域名、端口号、子域名不同，所进行的访问都是跨域的，而浏览器一般为了安全都限制了跨域访问，也就是不允许跨域访问资源。

• 解决方法

//在项目目录里找到config文件夹，然后找到index.js，找到proxyTable选项
proxyTable: {
      ‘/api‘: {
    target: ‘http://baidu.com‘,//举例说明，在开发中换成自己的地址
    pathRewrite: {
      ‘^/api‘: ‘‘
    }
//设置成如上的格式，而在具体使用时则把url设置变化一下
this.$http({
          method: ‘POST‘,
          url: ‘/api/auth/login‘,//此处做出改变
          data: {
            ‘username‘: this.username,//举的栗子
            ‘password‘: this.password //举的栗子
          }
        }).then(res => {
          console.log(res)
        }).catch(err => {
          console.log(err)
        })

此时就可以从前端中成功解决跨域问题

//又或者在后端中解决问题即添加一个过滤器
public class CorsFilter implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;
 
        // 不使用*，自动适配跨域域名，避免携带Cookie时失效
        String origin = request.getHeader("Origin");
        if(StringUtils.isNotBlank(origin)) {
            response.setHeader("Access-Control-Allow-Origin", origin);
        }
 
        // 自适应所有自定义头
        String headers = request.getHeader("Access-Control-Request-Headers");
        if(StringUtils.isNotBlank(headers)) {
            response.setHeader("Access-Control-Allow-Headers", headers);
            response.setHeader("Access-Control-Expose-Headers", headers);
        }
 
        // 允许跨域的请求方法类型
        response.setHeader("Access-Control-Allow-Methods", "*");
        // 预检命令（OPTIONS）缓存时间，单位：秒
        response.setHeader("Access-Control-Max-Age", "3600");
        // 明确许可客户端发送Cookie，不允许删除字段即可
        response.setHeader("Access-Control-Allow-Credentials", "true");
        
        chain.doFilter(request, response);
    }
} 

使用后端的解决方案也可以解决问题

总结

在使用VUE进行前端界面开发时，现在常用Axios进行后台请求，所以掌握Axios的使用在前端开发中有着极为重要的意义，所以有必要掌握axios的相关知识,可以在以后的工作当中在前端进行开发时避免遇见大的障碍，并且Axios具有如下特点：在浏览器中发送XMLHttpRequests请求， 支持Promise API， 提供了一些并发请求的接口简化操作，自动转换JSON数据，拦截请求和响应，转换请求和响应数据等优势，具有很好的适应性。