> 웹 프론트엔드 > uni-app > uniapp 프로젝트에 Axios를 도입하는 방법에 대한 자세한 설명

uniapp 프로젝트에 Axios를 도입하는 방법에 대한 자세한 설명

青灯夜游
풀어 주다: 2021-09-15 19:43:20
앞으로
16668명이 탐색했습니다.

다음 uniapp 튜토리얼 칼럼에서는 uniapp 프로젝트에서 axios를 도입하는 방법을 소개하고, withCredentials를 사용하여 도메인 간에 동시에 사용할 수 없는 쿠키 및 백엔드 구성을 얻을 수 있는 몇 가지 기본 지식을 이해하는 데 도움이 되기를 바랍니다. 모두에게!

uniapp 프로젝트에 Axios를 도입하는 방법에 대한 자세한 설명

axiosaxios

1、首先检查是否安装 npm 工具:工具 --> 插件安装

uniapp 프로젝트에 Axios를 도입하는 방법에 대한 자세한 설명

2、检查是否安装 npm,如果没有可以去看我的这篇文章:windows安装node.js用npm安装vue

3、安装后在当前目录下打开内置终端:(和前几步一样检查插件安装与否)

uniapp 프로젝트에 Axios를 도입하는 방법에 대한 자세한 설명

4、在终端输入:npm install axios 安装 axios

uniapp 프로젝트에 Axios를 도입하는 방법에 대한 자세한 설명

5、安装后如下所示:(node_modules 出现 axios)

uniapp 프로젝트에 Axios를 도입하는 방법에 대한 자세한 설명

uniapp 项目配置 axios

  • 创建 utils 文件按自己所需创建 .js 文件 

    uniapp 프로젝트에 Axios를 도입하는 방법에 대한 자세한 설명

  • 引入 axios

1

2

import Vue from 'vue'

import axios from 'axios'

로그인 후 복사
  • 配置如下:(注意:withCredentials允许获取cookie 和后端配置的跨域不可同时使用,会报错哦提醒你了!)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

import Vue from 'vue'

import axios from 'axios'

 

// create an axios instance

const service = axios.create({

    baseURL: 'https://www.yongjiachen.top/jccrm', // url = base url + request url

    //withCredentials: true, // send cookies when cross-domain requests 注意:withCredentials和后端配置的cross跨域不可同时使用

    timeout: 6000, // request timeout

    crossDomain: true

})

 

// request拦截器,在请求之前做一些处理

service.interceptors.request.use(

    config => {

        // if (store.state.token) {

        //     // 给请求头添加user-token

        //     config.headers["user-token"] = store.state.token;

        // }

        console.log('请求拦截成功')

        return config;

    },

    error => {

        console.log(error); // for debug

        return Promise.reject(error);

    }

);

 

//配置成功后的拦截器

service.interceptors.response.use(res => {

    if (res.data.status== 200) {

        return res.data

    } else {

        return Promise.reject(res.data.msg);

    }

}, error => {

    if (error.response.status) {

        switch (error.response.status) {

            case 401:

                break;

            default:

                break;

        }

    }

    return Promise.reject(error)

})

 

 

// 在main.js中放入这段自定义适配器的代码,就可以实现uniapp的app和小程序开发中能使用axios进行跨域网络请求,并支持携带cookie

axios.defaults.adapter = function(config) {

    return new Promise((resolve, reject) => {

        console.log(config)

        var settle = require('axios/lib/core/settle');

        var buildURL = require('axios/lib/helpers/buildURL');

        uni.request({

            method: config.method.toUpperCase(),

            url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer),

            header: config.headers,

            data: config.data,

            dataType: config.dataType,

            responseType: config.responseType,

            sslVerify: config.sslVerify,

            complete: function complete(response) {

                console.log("执行完成:",response)

                response = {

                    data: response.data,

                    status: response.statusCode,

                    errMsg: response.errMsg,

                    header: response.header,

                    config: config

                };

 

                settle(resolve, reject, response);

            }

        })

    })

}

 

export default service

로그인 후 복사
  • 在项目根目录的 main.js 配置引入全局 axios

    uniapp 프로젝트에 Axios를 도입하는 방법에 대한 자세한 설명

1

2

3

4

5

6

7

8

9

// 引入封装后的axios

import axios from './utils/request/request.js'

/**

 * 给Vue函数添加一个原型属性$axios 指向Axios

 * 这样做的好处是在vue实例或组件中不用再去重复引用Axios 直接用this.$axios就能执行axios 方法了

 * 在.vue中使用,this.$axios.get

 * @param {Object} config

 */

Vue.prototype.$axios = axios

로그인 후 복사
4. 터미널에 입력하세요: npm install axios Install axios

uniapp 프로젝트에 Axios를 도입하는 방법에 대한 자세한 설명

5. 설치 후 다음과 같습니다. (axios가 node_modules에 나타납니다)

uniapp 프로젝트에 Axios를 도입하는 방법에 대한 자세한 설명

🎜🎜uniapp 프로젝트 구성 <code>axios🎜
    🎜🎜🎜utils 파일을 생성하고 생성 >.js 파일을 필요에 따라🎜 🎜🎜uniapp 프로젝트에 Axios를 도입하는 방법에 대한 자세한 설명
    🎜🎜🎜🎜 🎜axios 소개🎜🎜🎜🎜rrreee
      🎜🎜 🎜구성은 다음과 같습니다. (참고: withCredentials를 사용하면 쿠키 획득과 도메인 간 백엔드 구성을 동시에 사용할 수 없습니다. 알림을 위해 오류가 보고됩니다! ) 🎜🎜🎜🎜rrreee
        🎜🎜🎜프로젝트의 main.js 구성에 전역 axios를 도입하세요. 루트 디렉터리 🎜🎜🎜uniapp 프로젝트에 Axios를 도입하는 방법에 대한 자세한 설명 🎜🎜 🎜rrreee
          🎜🎜🎜즐거운 사용axios🎜🎜🎜🎜🎜🎜🎜🎜🎜렌더링: 🎜🎜🎜🎜🎜🎜🎜 🎜🎜🎜🎜원본 주소: https://juejin.cn/post/7005042333288759333🎜🎜저자: Sunny_Chen🎜🎜🎜더 많은 프로그래밍 관련 지식을 보시려면 🎜프로그래밍 영상🎜을 방문해 주세요! ! 🎜

위 내용은 uniapp 프로젝트에 Axios를 도입하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:掘金--Sunny_Chen
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿