axios二次封装_get: async (option: any) => { const res =

目录

普通发送axios请求

一次封装 

二次封装

注意事项 ！！

         1.  async、await 查看报错信息

2.axios基地址的baseURL

3. 导出函数时注意写return 

---

普通发送axios请求

//App.vue
<script>
// 在次之前 一定要下载 axios哦
 
import axios from 'axios'
 
export default ({
  methods: {
    async getUrl () {
      const res = await axios({
        url: 'http://api-xxxx.net/app/v1_0/user/channels'
      })
      console.log(res)
    }
       
    // async getUrl2 () {
    //   axios({
    //     url: 'http://api-xxxx.net/app/v1_0/user/channels',
    //     methods: 'GET'
    //   }).then(res => console.log(res)).catch(err=>console.log(err))
    // }
  },
  created () {
    this.getUrl()
  }
})
</script>

缺点： 虽然说也能发送请求成功，但是如果我想每次调用就每次都在组件里面写一次 ，使无用代码量增加，也不适于其他人阅读

所以我们接下来进行封装

一次封装 

我们在until/index.js进行封装

import axios from 'axios'
 
export const request = axios.create({
  baseURL: 'http://xxxx.net'
})

    注意点：  axios.create() 是创建一个新的axios实例   每个都可以配置不同的基地址服务器   解决了请求2个及更多的服务器的情况

// App.vue
import { request } from './unitls/index'
 
export default ({
  methods: {
    async getUrl () {
      const res = await request({
        url: '/app/v1_0/user/channels'
      })
      console.log(res)
    }
  },
  created () {
    this.getUrl()
  }
})

缺点：我们这样在组件中还要写服务器接口 是不是不太好看呐       并且 如果我请求多次不同的接口是不是每个地方的url 都要修改

我们改为这样  const res = await request(） 是不是更加简单明了 逻辑清晰  so~我们进行第二次封装

二次封装

把组件中的url抽离出来    until/index.js不需要动 

// until/index.js
import axios from 'axios'
 
export const login = axios.create({
  baseURL: 'http://xxxx'
})

新建一个api文件夹 api/login.js

import { login } from '../unitls/index'
 
export const loginUser = () => {
  return login({
    url: '/app/v1_0/user/channels'
  })
}

接下来 就可以直接使用了

<script>
 
import { loginUser } from './API/login.js'
export default ({
  methods: {
    async getUrl () {
      try {
        console.log(1)
        const res = await loginUser()
        console.log(res)
      } catch (error) {
        console.log(error)
      }
    }
  },
  created () {
    this.getUrl()
  }
})
</script>

好处：

• 使代码逻辑清晰简单  在组件中方便其他人阅读
• 使代码复用性更强，是不是换个服务器和接口 只需要cv啊！！
• 修改服务器基地址和接口是不是一次修改 其他都不用修改了呢

注意事项 ！！

 1.  async、await 查看报错信息

我们知道普通axios 返回一个 promise对象  可以继续.then().catch()... 但是async呢

  methods: {
    async getUrl () {
      try {
        const res = await loginUser()
        console.log(res)
      } catch (error) {
        console.log(error)
      }
    }
  },
  created () {
    this.getUrl()
  }

使用try{ 代码块 } (err) { console.log('err') }    注意  catch 一定要知道  只要catch 不只是接收axios的错误信息  只要 try中有错误 catch 就会执行 

2.axios基地址的baseURL

export const login = axios.create({
  baseUrl: 'http://xxxx'
//timeout: 5000  请求超时事件最长5秒
})

注意上面的代码中baseURL是不是rl没有大写，如果没大写说明地址根本拿不到(等于没写) 就会以当前的8080端口去拼接接口 

    最后发现404了   一定注意 出现8080端口百分之八十是地址写错了

3. 导出函数时注意写return 

import { login } from '../unitls/index'
  // 本代码错误   注意别复制
export const loginUser = () => {
  login({
    url: '/app/v1_0/user/channels'
  })
}

 

这里虽然已经显示发送请求成功并且是 200 但是 我们拿到的值呢

最后发现却是undefined  比如说 我们定义了一个函数  我们没有return 那么这个函数拿到的是不是undefined       soga！一定要写return

代码片段

{
	// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:
	"try catch async await": {
		"scope": "javascript,typescript",
		"prefix": "async", // 快捷键 + tab
		"body": [
			"async $1(){",
      "import { $2 } from '@/api/${4}'",
      "  try {",
      "    const res = await $2($3)",
      "    console.log('$2', res)",
      "    ${5}// 保存数据",
      "  } catch (err) {",
      "    console.log('$2', err)",
      "  }",
			"},"
		],
		"description": "飞起来的async await"
	}
}