http客户端axios-阿里云开发者社区

开发者社区> 小鲍侃java> 正文

http客户端axios

简介: http客户端axios
+关注继续查看


image.png

本教程为入门教程,如有错误,请各位前端大佬指出。

1.axiox简介

jquery时代,我们使用ajax向后台提交数据请求,Vue时代,Axios提供了前端对后台数据请求的各种方式。

而在vue中很多都是使用axios

优缺点:

  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 客户端支持防止CSRF
  • 提供了一些并发请求的接口(重要,方便了很多的操作)

2.axios的跨域

由于前后端的端口号不同,那么会又跨域的问题。而解决跨域有很多总方法,比如使用后台配置或者nginx,以下是我做过的demo。

1.nginx配置跨域

1. #user  nobody;
2. worker_processes  1;
3. 
4. #error_log  logs/error.log;
5. #error_log  logs/error.log  notice;
6. #error_log  logs/error.log  info;
7. 
8. #pid        logs/nginx.pid;
9. daemon off;
10. events {
11.     worker_connections  65535;
12.     multi_accept on;
13. }
14. 
15. http {
16.     include       mime.types;
17.     default_type  application/octet-stream;
18. 
19. #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
20. #                  '$status $body_bytes_sent "$http_referer" '
21. #                  '"$http_user_agent" "$http_x_forwarded_for"';
22. 
23. #access_log  logs/access.log  main;
24. 
25.     sendfile        on;
26.     tcp_nopush     on;
27.     tcp_nodelay     on;
28. 
29. #keepalive_timeout  0;
30.     keepalive_timeout  65;
31. 
32.     server {
33.            listen 8080;
34.            server_name localhost;
35.            ##  = /表示精确匹配路径为/的url,真实访问为http://localhost:8088
36.            location = / {
37.                proxy_pass http://localhost:8088;
38.            }
39.            ##  /no 表示以/no开头的url,包括/no1,no/son,或者no/son/grandson
40.            ##  真实访问为http://localhost:5500/no开头的url
41.            ##  若 proxy_pass最后为/ 如http://localhost:3000/;匹配/no/son,则真实匹配为http://localhost:3000/son
42.            location /no {
43.                proxy_pass http://localhost:8088;
44.            }
45.            ##  /ok/表示精确匹配以ok开头的url,/ok2是匹配不到的,/ok/son则可以
46.            location /Demo/testDemoTranNew {
47.                proxy_pass http://localhost:8088;
48.    }           
49.     }
50. }
51. 复制代码

2.axios配置跨域

同时在axios中也可以配置跨域,方式如下:

1.修改config/index.js文件

        //增加跨域
        proxyTable: {
            "/api": {
                //目标地址
                target: "http://localhost:8088",
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
复制代码

2.main.js中增加变量

1. //跨域处理  相当于把index中的api地址拿过来
2. Vue.prototype.HOST = '/api'
3. 复制代码

直接调用就可以了,完全避免了跨域!

3.axios的get请求

在使用时main.js需要导入axios组件。具体方式请参考下文。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from "axios"
 
 
Vue.config.productionTip = false
 
Vue.prototype.$axios = axios
 
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})
复制代码

vue中的get请求.有两种写发,以下附上两种写法的格式。

<template>
<div>
      {{data}}
</div>
</template>
 
<script>
export default {
name: 'HelloWorld',
data () {
  return {
    content:"组件1",
    data:{}
    }
},
methods:{
 
},
created() {
  //第一种
  // this.$axios.get("https://api.apiopen.top/searchMusic",{
  //   params:{
  //      name:"雅俗共赏"
  //   }
  // }
  // )
  // .then(res => {
  //     console.log(res)
  //     this.data = res.data
  // })
  // .catch(error => {
  //     console.log(error)
  // })
 
  // 第二种
  this.$axios({
    method: 'get',
    url: 'https://api.apiopen.top/searchMusic',
    params: {
        name:"雅俗共赏"
    }
  })
  .then(res => {
      console.log(res)
      this.data = res.data
  })
  .catch(error => {
      console.log(error)
  })
  ;
}
}
</script>
复制代码

4.axios的post请求

在调用中也有两种写法,需要注意的是,需要使用qs去格式化参数,因为需要把对象转换成json格式。

<template>
<div>
      {{data}}
</div>
</template>
 
<script>
import qs from "qs"
 
export default {
name: 'HelloWorld',
data () {
  return {
    content:"组件1",
    data:{}
    }
},
methods:{
 
},
created() {
  //axios的post请求接收的参数是 form-data格式 ----   name = xiaobao 需要使用qs
  // this.$axios.post("https://api.it120.cc/common/mobile-segment/next",qs.stringify(
  //     {
  //   segment: 0
  //      }
  // )
  // )
  // .then(res => {
  //     console.log(res)
  //     this.data = res.data
  // })
  // .catch(error => {
  //     console.log(error)
  // })
 
 
   //这种写法需要transformRequest来转换格式 否则会报错 因为接受的是string类型参数 //但是不加stringify会直接变成对象传过去
   // 发送 POST 请求
  this.$axios({
    method: 'post',
    url: 'https://api.it120.cc/common/mobile-segment/next',
    data: {
         segment: 0
    },
    transformRequest: [function (data) {
    // 对 data 进行任意转换处理
    return qs.stringify(data);
  }]
  })
  .then(res => {
      console.log(res)
      this.data = res.data
  })
  .catch(error => {
      console.log(error)
  });
}
}
</script>
复制代码

5.url的全局配置

因为如果调用的api前缀相同,那么可以使用全局配置,将url配成全局,避免多次书写。

这里需要时对main.js配置,以下附上代码。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from "axios"
 
 
Vue.config.productionTip = false
 
Vue.prototype.$axios = 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';
 
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})
复制代码

调用时,url就可以省略baseURL中配置的

6.拦截器

在axios发送前和接受前,先执行拦截器(类似java拦截器),这里需要在main.js中加入配置。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from "axios"
import qs from 'qs'
 
 
Vue.config.productionTip = false
 
Vue.prototype.$axios = axios
 
axios.defaults.baseURL = 'https://api.it120.cc';
//axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
//axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
 
// 添加请求拦截器
axios.interceptors.request.use(function(config) {
    // 在发送请求之前做些什么
    console.log(config)
    if (config.method === "post") {
        config.data = qs.stringify(config.data);
    }
    return config;
}, function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
 
// 添加响应拦截器
axios.interceptors.response.use(function(response) {
    console.log(response)
    if (response.status !== 200) {
        return;
    }
    // 对响应数据做点什么
    return response;
}, function(error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});
 
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})
复制代码

这样的话,在接下来的使用中我们拦截了qs方法,在之后的使用中就不必每一个请求都调用qs方法了。

<template>
<div>
      {{data}}
</div>
</template>
 
<script>
import qs from "qs"
 
export default {
name: 'HelloWorld',
data () {
  return {
    content:"组件1",
    data:{}
    }
},
methods:{
 
},
created() {
  // 发送 POST 请求
  this.$axios({
    method: 'post',
    url: '/common/mobile-segment/next',
    data: {
         segment: 0
    }
    
  })
  .then(res => {
      console.log(res)
      this.data = res.data
  })
  .catch(error => {
      console.log(error)
  });
}
}
</script>
复制代码

7.前端测试方法

在测试前端时有几种获取数据方法

  • 1.mock 请求自己的json格式 缺点:无法post请求
  • 2.自己搭建服务器 获取数据
  • 3.使用线上已经存在的数据 缺点:线上必须存在数据

注意!操作dom节点时,避免操作原生dom 如:

<template>
<div>
      {{data}}
      <p ref = "myp">aaa</p>
</div>
</template>
 
<script>
import $ from "jquery"
 
export default {
name: 'HelloWorld',
data () {
  return {
    content:"组件1",
    data:{}
    }
},
methods:{
 
},
mounted() {
  //使用原生操作dom
  console.log(this.$refs.myp.innerHTML = "BBB")
  //console.log(this.$refs.myp.style.color = "red")
  var myo2 = this.$refs.myp
  myo2.addEventListener("click",function(){
    console.log("666")
  })
  //使用jquery操作dom
  $(myo2).css("color","YELLOW");
 
}
}
</script>


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
26700 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9154 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
11109 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10743 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
11993 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
12851 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
7365 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
3949 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
6839 0
+关注
小鲍侃java
小作坊架构师。
364
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载