axios的基本用法~~

Posted 2021-01-25 一朵小发

axios

• Promise based HTTP client for the browser and node.js

  • 以Promise为基础的HTTP客户端，适用于：浏览器和node.js
  • 封装ajax，用来发送请求，异步获取数据

// 在浏览器中使用，直接引入js文件使用下面的GET/POST请求方式即可
// 1 引入 axios.js
// 2 直接调用axios提供的API发送请求

created: function () {
  axios.get(url)
    .then(function(resp) {})
}

---

// 配合 webpack 使用方式如下：
import Vue from ‘vue‘
import axios from ‘axios‘
// 将 axios 添加到 Vue.prototype 中
Vue.prototype.$axios = axios

---
// 在组件中使用：
methods: {
  getData() {
    this.$axios.get(‘url‘)
      .then(res => {})
      .catch(err => {})
  }
}

---
// API使用方式：

axios.get(url[, config])
axios.post(url[, data[, config]])
axios(url[, config])
axios(config)

Get 请求

const url = ‘http://vue.studyit.io/api/getnewslist‘

// url中带有query参数
axios.get(‘/user?id=89‘)
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// url和参数分离，使用对象
axios.get(‘/user‘, {
  params: {
    id: 12345
  }
})

Post 请求

• 不同环境中处理 POST请求
• 默认情况下，axios 会将JS对象序列化为JSON对象。为了使用 application/x-www-form-urlencoded 格式发送请求，我们可以这样：

// 使用 qs 包，处理将对象序列化为字符串
// npm i -S qs
// var qs = require(‘qs‘)
import qs from ‘qs‘
qs.stringify({ ‘bar‘: 123 }) ===> "bar=123"
axios.post(‘/foo‘, qs.stringify({ ‘bar‘: 123 }))

// 或者：
axios.post(‘/foo‘, ‘bar=123&age=19‘)

const url = ‘http://vue.studyit.io/api/postcomment/17‘
axios.post(url, ‘content=点个赞不过份‘)

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

 

全局配置

// 设置请求公共路径：
axios.defaults.baseURL = ‘http://vue.studyit.io‘