最新公告
  • 欢迎您光临起源地模板网，本站秉承服务宗旨 履行“站长”责任，销售只是起点 服务永无止境！立即加入钻石VIP
    • 10年
    专注帝国cms二次开发
    升级SVIP
    站长资源平台
    当前位置：站长学院 > 综合教程 > vue入门：http客户端axios

    vue入门：http客户端axios

    正文概述 掘金(小黄鸡1992)   2021-08-13   437

    这是我参与 8 月更文挑战的第 13 天，活动详情查看： 8月更文挑战

    1.axiox简介

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

    而在vue中很多都是使用axios。

    优缺点：

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

    2.axios的跨域

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

    1.nginx配置跨域

    #user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;
daemon off;
events {
    worker_connections  65535;
	multi_accept on;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;
	
    sendfile        on;
    tcp_nopush     on;
	tcp_nodelay     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    server {
           listen 8080;
		   server_name localhost;
		   ##  = /表示精确匹配路径为/的url，真实访问为http://localhost:8088
		   location = / {
			   proxy_pass http://localhost:8088;
		   }
		   ##  /no 表示以/no开头的url，包括/no1,no/son，或者no/son/grandson
		   ##  真实访问为http://localhost:5500/no开头的url
		   ##  若 proxy_pass最后为/ 如http://localhost:3000/;匹配/no/son，则真实匹配为http://localhost:3000/son
		   location /no {
			   proxy_pass http://localhost:8088;
		   }
		   ##  /ok/表示精确匹配以ok开头的url，/ok2是匹配不到的，/ok/son则可以
		   location /Demo/testDemoTranNew {
			   proxy_pass http://localhost:8088;
   }           
    }
}

    2.axios配置跨域

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

    1.修改config/index.js文件
            //增加跨域
        proxyTable: {
            "/api": {
                //目标地址
                target: "http://localhost:8088",
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
    2.main.js中增加变量
    //跨域处理  相当于把index中的api地址拿过来
Vue.prototype.HOST = '/api'

    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.使用线上已经存在的数据 缺点：线上必须存在数据

    起源地下载网 » vue入门：http客户端axios

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用？
    本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了？
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或 联络我们.。
    找不到素材资源介绍文章里的示例图片？
    对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发？
    请QQ联系我们
    掘金(小黄鸡1992)

    掘金(小黄鸡1992) SVIP

    分享到：

    相关推荐

    发表评论

    还没有评论，快来抢沙发吧！

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元