Axios使用总结

Posted wu-yan-wen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Axios使用总结相关的知识,希望对你有一定的参考价值。

软工实践个人技术总结

技术概述

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数据,拦截请求和响应,转换请求和响应数据等优势,具有很好的适应性。

以上是关于Axios使用总结的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段14——Vue的axios网络请求封装

回归 | js实用代码片段的封装与总结(持续更新中...)

axios 使用总结

python常用代码片段总结

BootStrap有用代码片段(持续总结)

BootStrap实用代码片段(持续总结)