vue系列文章（28）axios全局配置

上节中我们对axios进行了简单的配置，对于每个文件都需要引入axios，现在我们可以对axios进行全局的配置，。

在main.js中引入axios

import axios from 'axios'

// axios全局配置
axios.defaults.baseURL = 'http://jsonplaceholder.typicode.com'

这样的话，我们就可以在单页面中直接使用axios

 

post: function () {
  // var _this = this;
  // this.$http.post("http://jsonplaceholder.typicode.com/posts",{
  axios.post("/posts",{
    title: this.blog.title,
    body: this.blog.content,
    userId: 1
  }).then((data) => {
    console.log(data);
    this.submited = true
  })

 

上面我们就可以不加URL的前缀了，直接调用接口地址即可。

在axios的全局配置中，我们也可以对请求头，及请求的其他参数信息进行全局配置，

如

// axios全局配置
axios.defaults.baseURL = 'http://jsonplaceholder.typicode.com'
// axios.defaults.headers.common ['Authorization'] = 'token'
// axios.defaults.headers.post['Content-type'] = 'application/urlencode'
// axios.defaults.headers.get['Accept'] = 'application/json'

也可以单独写一个axios文件，对axios的相关配置进行书写。如我们在src下面新建了一个axios-auth.js

 

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://jsonplaceholder.typicode.com'
})

// instance.defaults.headers.common['somthing'] = 'something'

export default instance

 

在里面写入我们的axios代码

通过export default 暴露我们的axios代码。

其他文件就可以直接饮用axios-auth.js文件了。

如果上面文章对你有用，打赏下我吧@*@