js中axios js中axios的用法

转载

新新人类 2023-09-12 12:52:37

文章标签 js中axios vue.js 学习 javascript ios 文章分类 iOS 移动开发

一、Axios简介

Axios是一个基于Promise的HTTP库，是当前比较流行的Ajax框架，相比较Ajax的回调函数能够更好地管理异步操作，可以用在浏览器和Node.js中。

二、安装axios

1、使用CDN方式

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2、使用NPM方式

//在终端输入以下命令
npm install axios --save

//安装完成后，在main.js文件中导入axios
import { createApp } from 'vue'
import App from './App.vue'
//导入axios
import axios from 'axios'

const app=createApp(App)
//注意这个绑定到vue的原型链中必须在mount之前，否则会报错
app.config.globalProperties.$axios = axios
app.mount('#app')
//配置完成后，在组件中通过this.$axios来调用axios的方法以发送请求

如果是在IDEA中建立Vue.js项目的话，可以先输入代码，然后系统会自动提示你是否导入，到时候按导入即可

三、基本用法

1、axios的get请求和post请求

发送get请求的两种方式

//url是地址，发送的数据通过？分隔，通过key=value的形式赋值，不同数据之间以&分隔
  this.$axios.get('/url?key=value&id=1')
      //请求响应成功时触发
      .then(function(response){
        console.log(response)
      })
      //请求失败时触发
      .catch(function(error){
        console.log(error)
      })

//url是地址,params用来指定发送的数据
this.$axios.get('/url',{
		params:{
			key:value,
			id:1
		}
	})
    //请求响应成功时触发
    .then(function(response){
      console.log(response)
    })
    //请求失败时触发
    .catch(function(error){
      console.log(error)
    })

post请求

//url是地址,数据以对象的形式作为post请求的第二个参数
this.$axios.post('/url',{
		username:"ao",
		password:"123456"
	})
    //请求响应成功时触发
    .then(function(response){
      console.log(response)
    })
    //请求失败时触发
    .catch(function(error){
      console.log(error)
    })

response是一个对象，它的属性有data和status
data：用于获取响应的数据
status：是HTTP状态码

error指的是一个错误对象，里面包含错误信息

2、请求JSON数据

在IDEA中新建一个vue项目
在public文件夹下创建一个data文件夹
在data文件夹中创建user.json文件

[
  {
    "name": "小明",
    "pass": "123456"
  },
  {
    "name": "小红",
    "pass": "345678"
  }
]

在HelloWorld.vue中使用如下代码

<template>
  <div class="hello">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  created(){
    //这里的localhost:8081是看你本机运行项目时给出的地址
    this.$axios.get('http://localhost:8081/data/user.json')
        .then(function (response){
          console.log(response);
        })
        .catch(function (error){
          console.log(error);
        })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

访问控制台，查看请求

3、跨域请求数据

修改vue.config.js文件，在这个文件中设置反向代理

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    proxy:{
      //api是后端数据接口的路径
      'api':{
        //后端数据接口的地址，这是一个免费的天气预报API接口
        target:'https://yiketianqi.com/api?unescape=1&version=v1&appid=85841439&appsecret=EKCDLT4I',
        //允许跨域
        changeOrigin:true,
        //调用时用api替代根路径
        pathRewrite:{
          '^/api':""
        }
      }
    }
  },
  //关闭eslint校验
  lintOnSave:false
})

注意：vue的热重载不会监听vue.config.js文件的修改，如果修改了这个文件，就需要重新运行npm serve才会有效果
2. 配置HelloWorld.vue组件

<template>
  <div class="hello">
    {{city}}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      city:""
    }
  },
  created(){
    //保存vue实例，因为在axios中，this指向的是axios而不是vue
    var that=this;
    this.$axios.get('/api')
      .then(function (response){
        that.city=response.data.city
        console.log(response)
      })
      .catch(function (error){
        console.log(error)
      })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

一个有意思的地方在于，如果你在vue.config.js文件中的target输入api地址，最后显示的是北京
但是如果你直接在HelloWorld的get请求中输入相同的api地址，它返回的是武汉（也就是你的所在地）

在网上查阅资料，发现可能是反向代理的原因，在vue.config.js文件中设置反向代理时，你是通过一台代理服务器进行访问的，所以IP地址显示的是北京的服务器，而如果通过get请求直接访问，那么IP地址显示的就是自己所在城市

4、并发请求

同时发送多个请求

axios.all(iterable)
axios.spread(callback)

修改HelloWorld.vue组件

<template>
  <div class="hello">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  created(){
  this.$axios.all([this.$axios.get('http://localhost:8081/data/user.json'),this.$axios.get('/api')])
      .then(this.$axios.spread(function (get1,get2){
        //两个请求现在都执行完成
        //get1是第一个get请求的响应结果
        //get2是第二个get方法请求的响应结果
        console.log(get1);
        console.log(get2);
      }));
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

四、使用axios创建请求

修改HelloWorld.vue组件，其实就是换了个形式，意思是一样的

this.$axios({
      method:'get',
      url:'http://localhost:8081/data/user.json',
    }).then(function(response){
      console.log(response);
    }).catch(function (error){
      console.log(error);
    })

五、请求配置

axios库提供了很多选项，以下是常见的几种

url：用于请求的服务器URL
method：创建请求时使用的方法，默认为get
baseURL：自动加在url前面，也就是一个相对地址
headers：即将被发送的自定义请求头，例如ajax请求
params：即将与请求一起发送的URL参数
transformRequest：在传递给then/catch前，允许修改响应数据，可用于对data进行任意转换
timeout：表示请求超时的毫秒数，0表示无超时时间

六、创建实例

通过创建axios实例，之后就可以使用该实例向服务器端发起请求
在HelloWorld.vue组件中

<script>
export default {
  name: 'HelloWorld',
  created(){
    var instance1=this.$axios.create({
      baseURL:'https://localhost:8081/',
      timeout:1000,
      headers:{'X-Custom-Header':'foobar'}
    });
    instance1({
      method:'get',
      url:'http://localhost:8081/data/user.json',
    }).then(function(response){
      console.log(response);
    }).catch(function (error){
      console.log(error);
    })
}
</script>

七、配置默认选项

设置全局的axios默认值
在main.js文件中配置

import { createApp } from 'vue'
import App from './App.vue'
//导入axios
import axios from 'axios'

const app=createApp(App)
//设置默认值
axios.defaults.baseURL='http://localhost:8081/'
//注意这个绑定到vue的原型链中必须在mount之前，否则会报错
app.config.globalProperties.$axios = axios
app.mount('#app')

也可以修改实例的默认值，这样就会只在使用该实例时才会生效

var instance1=this.$axios.create({
      timeout:1000,
      headers:{'X-Custom-Header':'foobar'}
    });
instance1.defaults.timeout=100;

配置会以一个优先顺序进行合并，后面的会覆盖前面的
首先是lib/default.js中找到库的默认值，或者是main.js里面设置的默认值
然后是实例的defaults属性
最后是请求的config参数

八、拦截器

//添加请求拦截器
    this.$axios.interceptors.request.use(function (config){
      //在发送请求之前做什么
      return config;
    },function (error){
      //对请求错误做什么
      return Promise.reject(error);
    })

    //添加响应拦截器
    this.$axios.interceptors.response.use(function (response){
      //对响应数据做什么
      return response;
    },function (error){
      //对响应错误做什么
      return Promise.reject(error);
    })

九、综合案例——显示近7日的天气情况

其实就是将接收到的数据按照规定的方式显示出来

<template>
  <div className="seven">
    <h2>{{ city }}</h2>
    <h4>今天：{{ date }} {{ week }}</h4>
    <h4>{{ message }}</h4>
    <ul>
      <li v-for="item in obj">
        <div>
          <h3>{{ item.date }}</h3>
          <h3>{{ item.week }}</h3>
          <!--这里找不到图片，可自行添加-->
          <img :src="get(item.weaimg)" alt="">
          <h3>{{ item.wea }}</h3>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'SevenDay',
  data() {
    return {
      city: "",
      obj: [],
      date: "",
      week: "",
      message: ""
    }
  },
  methods: {
    //定义get方法，拼接图片的路径
    get(sky) {
      return "durian/" + sky + ".png"
    }
  },
  created() {
    this.get();  //页面开始加载时调用get方法
    var that = this;
    this.$axios.get("https://yiketianqi.com/api?unescape=1&version=v1&appid=85841439&appsecret=EKCDLT4I")
        .then(function (response) {
          //处理数据
          that.city = response.data.city;
          that.obj = response.data.data;
          that.date = response.data.data[0].date;
          that.week = response.data.data[0].week;
          that.message = response.data.data[0].air_tips;
        })
        .catch(function (error) {
          console.log(error)
        })
  }
}
</script>
<style scoped>
h2, h4 {
  text-align: center;
}

li {
  float: left;
  list-style: none;
  width: 200px;
  text-align: center;
  border: 1px solid red;
}
</style>

js中axios js中axios的用法_js中axios

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：java创建服务器程序吗 java服务器开发流程

下一篇：java计算组合方式代码 java组合关系代码

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯