Vue笔记（四）：axios

最新推荐文章于 2024-11-16 11:20:13 发布

蔚蓝色的风暴

最新推荐文章于 2024-11-16 11:20:13 发布

阅读量154

点赞数

分类专栏： web前端 javascript 文章标签： ajax javascript vue.js

本文链接：https://blog.csdn.net/qq_37831759/article/details/120180579

版权

web前端同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

javascript

6 篇文章 0 订阅

订阅专栏

本文介绍了在Vue中如何使用axios库进行API访问，包括GET、POST等HTTP方法的基本用法和配置。axios是一个基于Promise的HTTP库，支持拦截器和错误处理。在组件的mounted阶段发送GET请求，示例中展示了如何处理响应数据。还讨论了axios实例的创建、默认配置设置，以及如何添加请求和响应拦截器。

摘要由CSDN通过智能技术生成

Vue中可以通过axios来访问API

Axios 是一个基于 promise 的 HTTP 库

本质上讲是ajax请求

基本写法

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => (this.info = response))
  }
})

在生命周期到达mounted时，axios发送了get请求给.json 同时在后面的回调函数中将返回的值赋给了info

get：查询
post：添加
put：修改
delete：删除

axios方法的基本配置包括

method 请求的方法（可选值： get , post 等）
url 请求的地址（必须项）
data 请求发送的数据（post等请求需要）

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

回调函数包括then和catch catch用于捕捉异常

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
}).then(res => {
    consloe.log(res)
}).catch(err => {
    console.log(err)
})

也可以直接调用同名的该方法

axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
}).then(function (response) {
  console.log(response);
}).catch(function (error) {
  console.log(error);
});

响应结构

{
  // `data` 由服务器提供的响应
  data: {},
  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,
  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',
  // `headers` 服务器响应的头
  headers: {},
   // `config` 是为请求提供的配置信息
  config: {},
 // 'request'
  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance the browser
  request: {}
}

创建实例

使用自定义配置可以创建一个axios实例 axios.create

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

配置默认值

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';

拦截器

axios.interceptors.request 请求拦截器
axios.interceptors.response 响应拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  config.header["Token"] = "xxxx"
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  if (response.status === 200){
    return response.data
  } else {
    return Promise.reject(new Error('error'))
  }
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});